:root{
      --bg:#F7F8FC;
      --surface:#FFFFFF;
      --text:#0F172A;
      --muted:#475569;
      --border: rgba(15, 23, 42, .12);

      /* Blue/Teal */
      --blue:#2563EB;     /* primary */
      --teal:#0EA5A5;     /* secondary */
      --teal2:#14B8A6;    /* highlight */

      --ok:#16A34A;
      --warn:#D97706;

      --radius:18px;
      --shadow: 0 12px 34px rgba(15,23,42,.08);
      --max: 1140px;

      --h1: clamp(26px, 3vw, 40px);
      --h2: clamp(20px, 2.2vw, 28px);
      --h3: 16px;
      --p: 16px;
      --small: 13px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    html { scroll-behavior: smooth; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }
    a{color:inherit; text-decoration:none}
    .container{max-width: var(--max); margin:0 auto; padding: 18px 16px 70px}

    /* Topbar */
    .topbar{
      position: sticky;
      top:0; z-index: 50;
      background: rgba(247,248,252,.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
    .topbar-inner{
      max-width: var(--max);
      margin:0 auto;
      padding: 12px 16px;
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:space-between;
    }
    .brand{display:flex; flex-direction:column; gap:2px}
    .brand strong{font-size:14px; letter-spacing:.2px}
    .brand span{font-size:12px; color: var(--muted)}
    .controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}

    .pill{
      font-size: 12px;
      padding: 6px 10px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.85);
      border-radius: 999px;
      color: var(--muted);
      white-space: nowrap;
    }
    .pill.primary{
      border-color: rgba(37,99,235,.28);
      background: rgba(37,99,235,.08);
      color: #1e3a8a;
    }
    .pill.teal{
      border-color: rgba(14,165,165,.35);
      background: rgba(14,165,165,.10);
      color: #0f766e;
    }
    .pill.ok{
      border-color: rgba(22,163,74,.35);
      background: rgba(22,163,74,.10);
      color:#14532d;
    }

    .btn{
      display:inline-flex; gap:8px; align-items:center; justify-content:center;
      padding: 10px 12px;
      border:1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 999px;
      cursor:pointer;
      font-size: 13px;
      box-shadow: 0 6px 18px rgba(15,23,42,.06);
      transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
      user-select:none;
    }
    .btn:hover{border-color: rgba(15,23,42,.18); box-shadow: 0 10px 26px rgba(15,23,42,.08)}
    .btn:active{transform: translateY(1px)}
    .btn.primary{
      border-color: rgba(37,99,235,.28);
      background: rgba(37,99,235,.10);
    }
    .btn.teal{
      border-color: rgba(14,165,165,.32);
      background: rgba(14,165,165,.10);
    }
    .btn.ghost{
      background: transparent;
      box-shadow:none;
    }

    /* Hero */
    .hero{padding: 18px 0 10px}
    .hero-grid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap:14px;
      align-items:stretch;
    }
    .card{
      background: var(--surface);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card-inner{padding: 18px}
    h1{font-size: var(--h1); margin:0 0 10px; letter-spacing:-.2px}
    h2{font-size: var(--h2); margin:0 0 10px; letter-spacing:-.2px}
    h3{font-size: var(--h3); margin:0 0 8px}
    p{font-size: var(--p); margin:0 0 10px}
    .muted{color: var(--muted)}
    .small{font-size: var(--small); color: var(--muted)}
    .hr{height:1px; background: var(--border); margin: 14px 0}
    .quick{display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px}

    .callout{
      border-left: 4px solid rgba(14,165,165,.55);
      background: rgba(14,165,165,.06);
      padding: 10px 12px;
      border-radius: 12px;
      margin-top: 10px;
    }

    /* Section header + search */
    .section{margin-top: 18px}
    .section-title{
      display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
      margin-bottom: 10px;
    }
    .search{
      width:min(520px, 100%);
      display:flex; gap:8px; align-items:center;
      border:1px solid var(--border);
      background: var(--surface);
      border-radius: 999px;
      padding: 10px 12px;
      box-shadow: 0 8px 22px rgba(15,23,42,.06);
    }
    .search input{
      all: unset;
      width:100%;
      color: var(--text);
      font-size: 14px;
    }
    .search input::placeholder{color: rgba(71,85,105,.75)}

    /* Lesson list */
    .lesson-list{display:grid; grid-template-columns: 1fr; gap: 12px}

    .lesson-head{
      padding: 14px 16px;
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      background: rgba(37,99,235,.06);
      border-bottom: 1px solid var(--border);
    }
    .lesson-head.teal{ background: rgba(14,165,165,.06); }
    .lesson-head .left{display:flex; gap:12px; align-items:flex-start}
    .badge{
      width:42px; height:42px; border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(37,99,235,.10);
      border: 1px solid rgba(37,99,235,.18);
      font-weight: 800;
      color:#1e3a8a;
      flex:0 0 auto;
    }
    .badge.teal{
      background: rgba(14,165,165,.10);
      border-color: rgba(14,165,165,.22);
      color:#0f766e;
    }
    .lesson-title{margin:0; font-size: 17px}
    .lesson-meta{margin:2px 0 0; font-size: 12px; color: var(--muted)}
    .lesson-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
    .ipa{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, .14);
      background: rgba(15, 23, 42, .04);
      color: rgba(15, 23, 42, .85);
      white-space: nowrap;
    }
    /* Progress */
    .progressWrap{display:flex; gap:8px; align-items:center}
    .check{
      display:flex; gap:8px; align-items:center;
      padding: 6px 10px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.9);
      border-radius: 999px;
      font-size: 12px;
      color: var(--muted);
      user-select:none;
      cursor:pointer;
    }
    .check input{accent-color: var(--teal); width:16px; height:16px}
    .progressBar{
      width: 160px;
      height: 10px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.9);
      border-radius: 999px;
      overflow:hidden;
    }
    .progressFill{
      height: 100%;
      width: 0%;
      background: rgba(14,165,165,.55);
    }
    .progressText{font-size:12px; color: var(--muted)}

    details > summary{
      list-style:none;
      cursor:pointer;
      user-select:none;
    }
    details > summary::-webkit-details-marker{display:none}

    .lesson-body{padding: 14px 16px 16px}

    /* In-lesson mini nav */
    .subnav{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin: 0 0 12px;
    }
    .subnav a{
      font-size: 12px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.9);
      color: var(--muted);
    }
    .subnav a:hover{
      border-color: rgba(14,165,165,.35);
      color:#0f766e;
      background: rgba(14,165,165,.08);
    }

    .two-col{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    .panel{
      background: rgba(255,255,255,.95);
      border:1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
    }
    .panel ul{margin:0; padding-left: 18px}
    .panel li{margin: 4px 0}
    .kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      background: rgba(14,165,165,.10);
      border:1px solid rgba(14,165,165,.22);
      padding: 2px 8px;
      border-radius: 999px;
      white-space:nowrap;
      color:#0f766e;
    }

    /* Exercises */
    .exercise{
      margin-top: 12px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(14,165,165,.22);
      background: rgba(14,165,165,.06);
    }
    .exercise .row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
    textarea{
      width:100%;
      min-height: 140px;
      background: var(--surface);
      border:1px solid rgba(15,23,42,.14);
      border-radius: 12px;
      padding: 10px;
      font-size: 14px;
      color: var(--text);
      outline:none;
      resize: vertical;
    }
    .actions{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-end;
      flex-wrap:wrap;
      margin-top: 10px;
    }

    /* Dictionary */
    .dict-controls{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;
    }
    .select{
      display:flex; gap:8px; align-items:center;
      border:1px solid var(--border);
      background: var(--surface);
      border-radius: 999px;
      padding: 8px 10px;
      box-shadow: 0 8px 22px rgba(15,23,42,.06);
    }
    select{
      border:none;
      background: transparent;
      font-size: 13px;
      color: var(--text);
      outline:none;
      cursor:pointer;
    }
    .dict-list{display:grid; grid-template-columns: 1fr; gap:10px; margin-top:12px}
    .dict-item{
      border:1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      padding: 12px;
      box-shadow: 0 10px 26px rgba(15,23,42,.06);
    }
    .dict-top{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline}
    .dict-word{
      font-size: 16px;
      font-weight: 800;
      letter-spacing:-.1px;
    }
    .dict-trans{color: var(--muted)}
    .dict-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
    .chip{
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.9);
      color: var(--muted);
    }
    .chip.teal{
      border-color: rgba(14,165,165,.32);
      background: rgba(14,165,165,.10);
      color:#0f766e;
    }
    .examples{margin-top:8px}
    .examples .ex{
      padding: 8px 10px;
      border-radius: 12px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(247,248,252,.75);
      margin-top:8px;
    }

    /* Modal (template generator) */
    .modal{
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,.45);
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      z-index: 100;
    }
    .modal.open{display:flex}
    .modal-card{
      width: min(920px, 100%);
      background: var(--surface);
      border:1px solid var(--border);
      border-radius: 18px;
      box-shadow: 0 18px 60px rgba(15,23,42,.25);
      overflow:hidden;
    }
    .modal-head{
      padding: 12px 14px;
      display:flex; justify-content:space-between; align-items:center; gap:10px;
      border-bottom:1px solid var(--border);
      background: rgba(37,99,235,.06);
    }
    .modal-body{padding: 12px 14px}
    .modal-body textarea{min-height: 260px}
    .modal-foot{
      padding: 12px 14px;
      display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
      border-top:1px solid var(--border);
    }
    /* Soft tables - same style as panels */
    .soft-table-wrap{overflow:auto; border-radius:14px; border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.9);}
    .soft-table{width:100%; border-collapse:collapse; min-width: 420px;}
    .soft-table th, .soft-table td{padding:10px 10px; border-bottom:1px solid rgba(15,23,42,.10); font-size:13px;}
    .soft-table th{background: rgba(14,165,165,.06); text-align:left; font-weight:800;}
    .soft-table tr:last-child td{border-bottom:none;}

    .footer{
      margin-top: 22px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 12px;
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    /* Responsive */
    @media (max-width: 960px){
      .hero-grid{grid-template-columns: 1fr}
      .two-col{grid-template-columns: 1fr}
      .exercise .row{grid-template-columns: 1fr}
      .lesson-actions{justify-content:flex-start}
      .progressBar{width: 120px}
    }

    /* Print */
    @media print{
      .topbar, .controls, .search, .footer, .lesson-actions, .subnav, .dict-controls, .btn, .modal { display:none !important; }
      body{ background:#fff; }
      .card, .dict-item{ box-shadow:none; }
      details[open] summary{ display:none; }
    }