:root{
      /* Base */
      --bg: #FFFFFF;
      --surface: #F8FAFC;
      --ink: #0B0F1A;
      --ink-soft: #334155;
      --muted: #94A3B8;
      --line: #E2E8F0;

      /* Brand */
      --accent: #111827; /* MOD dot / primary CTA */
      --link: #2563EB;

      /* Status */
      --success: #16A34A;
      --warning: #F59E0B;
      --danger: #EF4444;
      --info: #06B6D4;

      /* Category colors (10) */
      --c1: #2563EB; /* Blue */
      --c2: #06B6D4; /* Cyan */
      --c3: #14B8A6; /* Teal */
      --c4: #22C55E; /* Green */
      --c5: #84CC16; /* Lime */
      --c6: #F59E0B; /* Yellow */
      --c7: #F97316; /* Orange */
      --c8: #EF4444; /* Red */
      --c9: #EC4899; /* Pink */
      --c10:#8B5CF6; /* Violet */

      /* Sizing */
      --radius-sm: 10px;
      --radius: 14px;
      --radius-lg: 18px;

      --shadow-sm: 0 1px 2px rgba(2,6,23,.05);
      --shadow: 0 10px 30px rgba(2,6,23,.06);
      --focus: 0 0 0 4px rgba(37,99,235,.18);

      --container: 1200px;
    }

    *{ box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.5;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    a { color: var(--link); text-decoration: none; }
    a:hover{ text-decoration: underline; }

    .topbar{
      position: sticky; top: 0;
      background: rgba(255,255,255,.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
      z-index: 10;
    }
    .topbar-inner{
      max-width: var(--container);
      margin: 0 auto;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .logo{
      font-weight: 800;
      letter-spacing: -0.02em;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 18px;
    }
    .logo.logo-image{
      gap: 0;
      line-height: 0;
    }
    .logo.logo-image img{
      height: 28px;
      width: auto;
      display: block;
    }
    .logo .mod{ font-weight: 800; }
    .logo .dot{ width: 8px; height: 8px; border-radius: 999px; background: var(--accent); display: inline-block; transform: translateY(-1px); }
    .logo .plan{ font-weight: 500; color: var(--ink-soft); }
    .actions{
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .nav{
      display: flex;
      gap: 14px;
      align-items: center;
      color: var(--ink-soft);
      font-weight: 500;
      font-size: 14px;
    }
    .nav a{ color: var(--ink-soft); padding: 8px 10px; border-radius: 999px; }
    .nav a:hover{ background: var(--surface); text-decoration: none; }
    .nav a.active{ color: var(--ink); background: rgba(17,24,39,.06); }

    .wrap{
      max-width: var(--container);
      margin: 0 auto;
      padding: 28px 20px 40px;
      width: 100%;
      flex: 1;
    }

    .hero{
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
      border-radius: var(--radius-lg);
      padding: 28px;
      box-shadow: var(--shadow-sm);
      display: grid;
      gap: 18px;
    }
    .hero h1{
      margin: 0;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.1;
      letter-spacing: -0.03em;
    }
    .hero p{
      margin: 0;
      max-width: 70ch;
      color: var(--ink-soft);
      font-size: 16px;
    }

    .row{
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      margin-top: 22px;
    }
    @media (min-width: 980px){
      .row{ grid-template-columns: 1.2fr .8fr; }
    }

    .card{
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 18px;
      box-shadow: var(--shadow-sm);
    }
    .card h2{
      margin: 0 0 10px;
      font-size: 18px;
      letter-spacing: -0.02em;
    }
    .sub{
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 14px;
    }

    .grid{
      display: grid;
      gap: 14px;
    }
    @media (min-width: 820px){
      .grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
      .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
      .grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
    }

    /* Typography samples */
    .type h1,.type h2,.type h3,.type h4{ margin: 0 0 8px; letter-spacing: -0.02em; }
    .type h1{ font-size: 44px; }
    .type h2{ font-size: 32px; }
    .type h3{ font-size: 24px; }
    .type h4{ font-size: 18px; }
    .type p{ margin: 0 0 10px; color: var(--ink-soft); }
    .type .small{ font-size: 13px; color: var(--muted); }
    .mono{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      overflow: auto;
    }

    /* Buttons */
    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      height: 46px;
      padding: 0 16px;
      border-radius: 12px;
      border: 1px solid transparent;
      font-weight: 600;
      letter-spacing: -0.01em;
      font-size: 14px;
      cursor: pointer;
      transition: transform .08s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
      user-select: none;
      text-decoration: none;
    }
    .btn:active{ transform: translateY(1px); }

    .btn-primary{
      background: var(--accent);
      color: #fff;
      box-shadow: 0 6px 16px rgba(17,24,39,.16);
    }
    .btn-primary:hover{ background: #1F2937; }

    .btn-secondary{
      background: #fff;
      border-color: var(--line);
      color: var(--ink);
    }
    .btn-secondary:hover{ background: var(--surface); }

    .btn-ghost{
      background: transparent;
      border-color: transparent;
      color: var(--ink);
    }
    .btn-ghost:hover{ background: var(--surface); }

    .btn:focus{
      outline: none;
      box-shadow: var(--focus);
    }

    /* Inputs */
    .field{ display: grid; gap: 8px; }
    label{ font-size: 13px; font-weight: 600; color: var(--ink-soft); }
    .input, .select, .textarea{
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 12px;
      font-size: 14px;
      background: #fff;
      color: var(--ink);
      transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
    }
    .textarea{ min-height: 110px; resize: vertical; }
    .input:focus, .select:focus, .textarea:focus{
      outline: none;
      border-color: rgba(37,99,235,.55);
      box-shadow: var(--focus);
    }
    .hint{ font-size: 12px; color: var(--muted); }

    /* Badges */
    .badge{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid rgba(2,6,23,.06);
      background: rgba(148,163,184,.15);
      color: var(--ink-soft);
      white-space: nowrap;
    }
    .badge .dot{
      width: 8px; height: 8px; border-radius: 999px; background: var(--muted);
    }
    .badge.cat{ border-color: rgba(2,6,23,.06); }
    .cat.c1{ background: rgba(37,99,235,.14); color: var(--c1); }
    .cat.c1 .dot{ background: var(--c1); }
    .cat.c2{ background: rgba(6,182,212,.14); color: var(--c2); }
    .cat.c2 .dot{ background: var(--c2); }
    .cat.c3{ background: rgba(20,184,166,.14); color: var(--c3); }
    .cat.c3 .dot{ background: var(--c3); }
    .cat.c4{ background: rgba(34,197,94,.14); color: var(--c4); }
    .cat.c4 .dot{ background: var(--c4); }
    .cat.c5{ background: rgba(132,204,22,.14); color: var(--c5); }
    .cat.c5 .dot{ background: var(--c5); }
    .cat.c6{ background: rgba(245,158,11,.16); color: var(--c6); }
    .cat.c6 .dot{ background: var(--c6); }
    .cat.c7{ background: rgba(249,115,22,.16); color: var(--c7); }
    .cat.c7 .dot{ background: var(--c7); }
    .cat.c8{ background: rgba(239,68,68,.14); color: var(--c8); }
    .cat.c8 .dot{ background: var(--c8); }
    .cat.c9{ background: rgba(236,72,153,.14); color: var(--c9); }
    .cat.c9 .dot{ background: var(--c9); }
    .cat.c10{ background: rgba(139,92,246,.14); color: var(--c10); }
    .cat.c10 .dot{ background: var(--c10); }

    /* Color swatches */
    .swatch{
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
    }
    .swatch .chip{ height: 62px; }
    .swatch .meta{
      padding: 10px 12px;
      display: grid;
      gap: 4px;
    }
    .swatch .name{ font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
    .swatch .hex{ font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

    /* Table */
    table{
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }
    thead th{
      text-align: left;
      font-size: 12px;
      letter-spacing: .02em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 12px 12px;
      border-bottom: 1px solid var(--line);
      background: rgba(248,250,252,.9);
    }
    tbody td{
      padding: 12px 12px;
      border-bottom: 1px solid rgba(226,232,240,.7);
      font-size: 14px;
      color: var(--ink-soft);
    }
    tbody tr:hover td{ background: #F1F5F9; }
    tbody tr:last-child td{ border-bottom: none; }
    .t-strong{ color: var(--ink); font-weight: 700; }

    /* Alerts */
    .alert{
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 12px;
      background: #fff;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .alert .icon{
      width: 30px; height: 30px;
      border-radius: 10px;
      display: grid; place-items: center;
      font-weight: 800;
      color: #fff;
      flex: 0 0 auto;
    }
    .alert .title{ margin: 0; font-weight: 800; letter-spacing: -0.01em; }
    .alert .text{ margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; }

    .alert.success .icon{ background: var(--success); }
    .alert.warning .icon{ background: var(--warning); }
    .alert.danger  .icon{ background: var(--danger); }
    .alert.info    .icon{ background: var(--info); }

    /* Tabs */
    .tabs{
      display: inline-flex;
      gap: 6px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
    }
    .tab{
      padding: 9px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-soft);
      cursor: pointer;
      user-select: none;
    }
    .tab.active{
      background: #fff;
      color: var(--ink);
      border: 1px solid rgba(226,232,240,.8);
      box-shadow: 0 1px 2px rgba(2,6,23,.05);
    }

    /* Plan blocks (category left-bar style) */
    .block{
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      overflow: hidden;
      display: grid;
      grid-template-columns: 8px 1fr;
      box-shadow: var(--shadow-sm);
    }
    .bar{ background: var(--c1); }
    .block .content{ padding: 12px 14px; display: grid; gap: 8px; }
    .block .head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .block .title{ margin: 0; font-weight: 800; letter-spacing: -0.01em; }
    .block .meta{ font-size: 12px; color: var(--muted); }
    .block .desc{ margin: 0; color: var(--ink-soft); font-size: 14px; }

    /* Modal mock */
    .modal-wrap{
      border: 1px dashed rgba(148,163,184,.7);
      border-radius: 16px;
      background: rgba(248,250,252,.7);
      padding: 14px;
      position: relative;
    }
    .modal{
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      padding: 16px;
      box-shadow: var(--shadow);
      max-width: 520px;
    }
    .modal .header{ display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .modal .header h3{ margin: 0; font-size: 18px; letter-spacing: -0.02em; }
    .modal .body{ margin-top: 10px; color: var(--ink-soft); }
    .modal .footer{ margin-top: 14px; display: flex; gap: 10px; justify-content: flex-end; }

    /* Footer */
    .site-footer{
      border-top: 1px solid var(--line);
      background: rgba(248,250,252,.85);
      backdrop-filter: blur(8px);
    }
    .site-footer .inner{
      max-width: var(--container);
      margin: 0 auto;
      padding: 8px 20px;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--ink-soft);
    }
    .site-footer .brand{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    .site-footer .brand img{
      height: 14px;
      width: auto;
      display: block;
    }
    .site-footer nav{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .site-footer nav a{
      color: var(--ink-soft);
      text-decoration: none;
      line-height: 1;
    }
    .site-footer nav a:hover{
      color: var(--ink);
      text-decoration: underline;
    }
    .site-footer .sep{
      color: var(--line);
      user-select: none;
    }

    .legal{
      max-width: 860px;
      margin: 0 auto;
      display: grid;
      gap: 18px;
    }
    .legal h1{
      margin: 0;
      font-size: clamp(26px, 4vw, 36px);
      letter-spacing: -0.03em;
      line-height: 1.15;
    }
    .legal h2{
      margin: 0;
      font-size: 18px;
      letter-spacing: -0.02em;
    }
    .legal p{
      margin: 0;
      color: var(--ink-soft);
      font-size: 14px;
    }
    .legal .meta{
      color: var(--muted);
      font-size: 12px;
    }
    .legal .actions{
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .legal .stack{
      display: grid;
      gap: 4px;
      color: var(--ink-soft);
      font-size: 14px;
    }
    .legal ul{
      margin: 0;
      padding-left: 18px;
      color: var(--ink-soft);
      font-size: 14px;
      display: grid;
      gap: 6px;
    }

    .foot{
      margin-top: 26px;
      color: var(--muted);
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .pill{
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink-soft);
      font-weight: 600;
    }

    @media (max-width: 780px){
      .topbar-inner{
        flex-wrap: wrap;
      }
      .logo.logo-image img{
        height: 24px;
      }
      .site-footer .inner{
        justify-content: center;
      }
    }