:root {
      --bg-1: #071526;
      --bg-2: #0f2747;
      --surface: rgba(255,255,255,.88);
      --surface-strong: #ffffff;
      --border: rgba(148, 163, 184, 0.22);
      --text: #102a43;
      --text-soft: #587089;
      --brand: #0f2747;
      --brand-2: #1d5f8f;
      --accent: #38bdf8;
      --success: #22c55e;
      --warning: #f59e0b;
      --shadow: 0 22px 55px rgba(8, 32, 59, .14);
      --radius-xl: 30px;
      --radius-lg: 22px;
      --radius-md: 16px;
    }

    [data-theme="dark"] {
      --bg-1: #020617;
      --bg-2: #0f172a;
      --surface: rgba(15, 23, 42, .82);
      --surface-strong: #111827;
      --border: rgba(148, 163, 184, 0.20);
      --text: #e5eef8;
      --text-soft: #a7b5c4;
      --brand: #e0f2fe;
      --brand-2: #38bdf8;
      --shadow: 0 22px 55px rgba(0, 0, 0, .28);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      min-height: 100%;
      font-family: Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 8% 4%, rgba(56, 189, 248, .30), transparent 23%),
        radial-gradient(circle at 92% 4%, rgba(34, 197, 94, .22), transparent 24%),
        linear-gradient(180deg, var(--bg-2), #eef5fb 52%, #f8fbfd);
      overflow-x: hidden;
    }

    [data-theme="dark"] body {
      background:
        radial-gradient(circle at 8% 4%, rgba(56, 189, 248, .22), transparent 24%),
        radial-gradient(circle at 92% 4%, rgba(34, 197, 94, .15), transparent 24%),
        linear-gradient(180deg, var(--bg-1), var(--bg-2));
    }

    .app {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(16px);
      background: linear-gradient(135deg, rgba(7,21,38,.96), rgba(15,39,71,.90), rgba(29,95,143,.88));
      border-bottom: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 14px 42px rgba(8, 32, 59, .24);
    }

    .header-inner {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 24px 0 22px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
    }

    .brand-area {
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
    }

    .logo {
      width: 58px;
      height: 58px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, #38bdf8, #22c55e);
      box-shadow: 0 16px 32px rgba(56,189,248,.22);
      font-weight: 900;
      letter-spacing: .5px;
    }

    h1 {
      font-size: clamp(1.55rem, 3vw, 2.45rem);
      letter-spacing: .6px;
      color: #f7fffd;
      line-height: 1.1;
      text-shadow: 0 0 18px rgba(200, 244, 226, .25);
    }

    .subtitle {
      margin-top: 7px;
      color: rgba(241, 248, 255, .82);
      font-size: .98rem;
      line-height: 1.45;
    }

    .top-actions {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .theme-btn {
      border: 1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.12);
      color: #fff;
      padding: 12px 14px;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 800;
      backdrop-filter: blur(12px);
    }

    main {
      flex: 1;
      width: min(1180px, calc(100% - 32px));
      margin: 30px auto 28px;
    }

    .hero {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 22px;
      align-items: stretch;
      margin-bottom: 24px;
    }

    .hero-card, .info-card, .toolbar {
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      border-radius: var(--radius-xl);
      backdrop-filter: blur(14px);
    }

    .hero-card { padding: 32px; }

    .hero-card h2 {
      font-size: clamp(1.35rem, 2.6vw, 2rem);
      margin-bottom: 12px;
      color: var(--brand);
    }

    .hero-card p {
      color: var(--text-soft);
      line-height: 1.7;
      font-size: 1rem;
      max-width: 760px;
    }

    .hero-stats {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .stat {
      background: rgba(255,255,255,.62);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 18px;
    }

    [data-theme="dark"] .stat { background: rgba(2,6,23,.35); }

    .stat strong {
      display: block;
      font-size: 1.55rem;
      color: var(--brand);
      margin-bottom: 6px;
    }

    .stat span {
      font-size: .95rem;
      color: var(--text-soft);
    }

    .info-card {
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(56, 189, 248, .15);
      color: var(--brand);
      font-weight: 800;
      font-size: .95rem;
      border: 1px solid rgba(56, 189, 248, .15);
    }

    .info-card p {
      color: var(--text-soft);
      line-height: 1.7;
    }

    .toolbar {
      padding: 18px;
      margin-bottom: 18px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
    }

    .search-box {
      position: relative;
    }

    .search-box input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 15px 16px 15px 48px;
      font-size: 1rem;
      outline: none;
      background: rgba(255,255,255,.72);
      color: var(--text);
    }

    [data-theme="dark"] .search-box input {
      background: rgba(2,6,23,.38);
    }

    .search-box svg {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 21px;
      height: 21px;
      color: var(--text-soft);
      fill: currentColor;
    }

    .counter-pill {
      white-space: nowrap;
      border-radius: 999px;
      padding: 12px 15px;
      background: rgba(34,197,94,.14);
      color: var(--brand);
      font-weight: 900;
      border: 1px solid rgba(34,197,94,.20);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .app-link {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 20px 22px;
      text-decoration: none;
      color: var(--text);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,252,255,.82));
      border: 1px solid var(--border);
      border-radius: 24px;
      box-shadow: 0 12px 30px rgba(15,39,71,.08);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
      animation: rise .45s ease both;
    }

    [data-theme="dark"] .app-link {
      background: linear-gradient(180deg, rgba(15,23,42,.90), rgba(2,6,23,.55));
      box-shadow: 0 14px 34px rgba(0,0,0,.22);
    }

    .app-link:hover {
      transform: translateY(-4px);
      border-color: rgba(56,189,248,.36);
      box-shadow: 0 20px 38px rgba(15,39,71,.16);
    }

    .app-link.hide { display: none; }

    .app-icon {
      width: 58px;
      height: 58px;
      min-width: 58px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    }

    .app-icon svg { width: 29px; height: 29px; fill: currentColor; }

    .icon-1 { background: linear-gradient(135deg, #e5f2ff, #dff8f0); color: #17628b; }
    .icon-2 { background: linear-gradient(135deg, #ffe6ef, #fff2f2); color: #b24c70; }
    .icon-3 { background: linear-gradient(135deg, #e7ecff, #eef7ff); color: #4d63b8; }
    .icon-4 { background: linear-gradient(135deg, #ecf7ff, #eef9f0); color: #38767a; }
    .icon-5 { background: linear-gradient(135deg, #fff3df, #fff8ec); color: #a66b1d; }
    .icon-6 { background: linear-gradient(135deg, #eef7ea, #f8fdea); color: #5c8e32; }
    .icon-7 { background: linear-gradient(135deg, #e6fbff, #edf7ff); color: #1d7b95; }
    .icon-8 { background: linear-gradient(135deg, #fff0e3, #fff8ef); color: #b66a3b; }
    .icon-9 { background: linear-gradient(135deg, #eee8ff, #f5f0ff); color: #6952ae; }
    .icon-10 { background: linear-gradient(135deg, #e8f7ff, #edf3ff); color: #2d6ea0; }
    .icon-11 { background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #c2410c; }
    .icon-12 { background: linear-gradient(135deg, #ecfeff, #dbeafe); color: #0369a1; }

    .app-text { flex: 1; text-align: left; min-width: 0; }

    .app-text strong {
      display: block;
      font-size: 1.08rem;
      line-height: 1.45;
      margin-bottom: 4px;
      color: var(--brand);
    }

    .app-text small {
      color: var(--text-soft);
      font-size: .93rem;
      line-height: 1.45;
    }

    .app-arrow {
      color: #6e89a3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .app-arrow svg { width: 22px; height: 22px; fill: currentColor; }

    .empty {
      display: none;
      margin-top: 18px;
      padding: 18px;
      border-radius: 18px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-soft);
      text-align: center;
    }

    .empty.show { display: block; }

    footer {
      margin-top: 24px;
      border-top: 1px solid rgba(15,39,71,.08);
      background: rgba(255,255,255,.45);
      backdrop-filter: blur(10px);
    }

    [data-theme="dark"] footer { background: rgba(2,6,23,.42); }

    .footer-inner {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 18px 0 24px;
      color: var(--text-soft);
      text-align: center;
      font-size: .96rem;
    }

    @keyframes rise {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 980px) {
      .hero { grid-template-columns: 1fr; }
      .grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 700px) {
      .header-inner {
        width: min(100% - 24px, 1180px);
        padding: 20px 0;
        grid-template-columns: 1fr;
      }

      .top-actions { justify-content: flex-start; }

      main {
        width: min(100% - 24px, 1180px);
        margin-top: 22px;
      }

      .brand-area { align-items: flex-start; }
      .logo { width: 50px; height: 50px; border-radius: 17px; }

      .hero-card, .info-card { padding: 22px; }
      .hero-stats { grid-template-columns: 1fr; }
      .toolbar { grid-template-columns: 1fr; }

      .app-link {
        padding: 16px;
        gap: 14px;
        border-radius: 20px;
      }

      .app-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
      }

      .app-text strong { font-size: 1rem; }
    }