:root{
    --paper:#f5f2e9; --paper2:#eee9da;
    --sage:#a9be7e; --sage-deep:#8a9a5b; --olive:#5f6e3a; --olive-dk:#48562a;
    --ink:#3d3a2e; --ink-soft:#7c7866; --card:#fcfbf5;
    --line:#e3ddc9; --shadow:0 14px 40px rgba(95,110,58,.14);
    --right:#6f9a4e; --wrong:#c2693f;
    /* four laws — each a color */
    --L1:#5b8fb0; --L2:#b07d5b; --L3:#8a6fb0; --L4:#5f6e3a;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
  body{
    font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    color:var(--ink); min-height:100vh; display:flex; justify-content:center;
    padding:18px 14px 44px;
    background:radial-gradient(130% 70% at 50% 0%, #f7f4ea 0%, #eef0df 55%, #e4ead0 100%);
    position:relative;
  }
  body::before{content:"";position:fixed;left:-10%;right:-10%;bottom:-5%;height:48%;
    background:radial-gradient(60% 100% at 30% 100%, rgba(169,190,126,.5), transparent 70%),
               radial-gradient(55% 100% at 75% 100%, rgba(138,154,91,.4), transparent 70%);
    filter:blur(6px);z-index:0;pointer-events:none}
  .app{width:100%;max-width:440px;position:relative;z-index:1}

  .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .brand{font-size:18px;font-weight:800;color:var(--olive);letter-spacing:2px}
  .brand small{font-weight:500;font-size:11px;color:var(--sage-deep);letter-spacing:1px;margin-left:6px}
  .rank{font-size:12px;color:var(--ink-soft);background:rgba(255,255,255,.72);
    border:1px solid var(--line);padding:5px 11px;border-radius:20px}
  .rank b{color:var(--olive)}

  .panel{background:var(--card);border:1px solid var(--line);border-radius:22px;
    box-shadow:var(--shadow);padding:22px 18px;position:relative;overflow:hidden}
  .leaf{position:absolute;font-size:20px;opacity:.5}
  .leaf.a{top:14px;left:16px;transform:rotate(-20deg)}
  .leaf.b{top:14px;right:16px;transform:scaleX(-1) rotate(-20deg)}

  /* ---------- HOME ---------- */
  .hero{text-align:center;padding:4px 4px 2px}
  .hero .tag{display:inline-block;background:var(--paper2);color:var(--olive);
    font-size:12px;font-weight:600;padding:4px 14px;border-radius:12px;letter-spacing:1px}
  .hero h1{font-size:23px;font-weight:800;color:var(--ink);letter-spacing:3px;margin-top:12px}
  .hero p{font-size:13px;color:var(--ink-soft);margin:10px 12px 4px;line-height:1.8}
  .hero p b{color:var(--olive)}

  .menu{margin-top:18px;display:flex;flex-direction:column;gap:11px}
  .mcard{display:flex;align-items:center;gap:13px;background:var(--paper);
    border:1px solid var(--line);border-radius:16px;padding:15px 15px;cursor:pointer;
    transition:transform .1s, box-shadow .2s}
  .mcard:active{transform:scale(.985)}
  .mcard .ic{width:42px;height:42px;border-radius:12px;flex:none;display:flex;align-items:center;
    justify-content:center;font-size:22px;background:#fff;border:1px solid var(--line)}
  .mcard .tx{flex:1}
  .mcard .tt{font-size:15.5px;font-weight:700;color:var(--ink)}
  .mcard .ds{font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.55}
  .mcard .go{color:var(--sage-deep);font-size:18px}
  .mcard.primary{background:linear-gradient(180deg,#9fb472,#7e9050);border-color:#7e9050}
  .mcard.primary .tt,.mcard.primary .ds{color:#fff}
  .mcard.primary .ds{opacity:.9}
  .mcard.primary .ic{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
  .mcard.primary .go{color:#fff}

  .homestat{margin-top:18px;display:flex;gap:10px}
  .homestat .s{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:14px;
    text-align:center;padding:12px 6px}
  .homestat .n{font-size:21px;font-weight:800;color:var(--olive)}
  .homestat .l{font-size:11px;color:var(--ink-soft);margin-top:2px}

  /* ---------- QUIZ ---------- */
  .qhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .back-btn{background:var(--paper2);border:none;color:var(--olive);font-weight:700;
    font-size:13px;padding:7px 13px;border-radius:11px;cursor:pointer;font-family:inherit}
  .qmeta{font-size:12px;color:var(--ink-soft);text-align:right;line-height:1.5}
  .qmeta b{color:var(--olive)}
  .progress{height:6px;background:var(--paper2);border-radius:6px;overflow:hidden;margin-bottom:14px}
  .progress i{display:block;height:100%;background:linear-gradient(90deg,#a9be7e,#7e9050);width:0;transition:width .3s}

  .timer{height:6px;background:var(--paper2);border-radius:6px;overflow:hidden;margin-bottom:12px;display:none}
  .timer.on{display:block}
  .timer i{display:block;height:100%;background:linear-gradient(90deg,#d98b5f,#c2693f);width:100%}

  .qcard{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 16px;margin-bottom:14px}
  .qcard .qno{font-size:11px;font-weight:700;color:var(--sage-deep);letter-spacing:1px;margin-bottom:8px}
  .qcard .qmode{float:right;font-size:10.5px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);
    padding:2px 8px;border-radius:8px;letter-spacing:.5px}
  .qcard .stem{font-size:16.5px;line-height:1.85;color:var(--ink);font-weight:600}
  .qcard .ask{font-size:12.5px;color:var(--ink-soft);margin-top:10px}

  .opts{display:flex;flex-direction:column;gap:10px}
  .opt{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--line);
    border-radius:13px;padding:13px 14px;cursor:pointer;transition:border-color .15s, background .15s;
    font-size:14.5px;color:var(--ink);font-weight:600}
  .opt .lab{width:22px;height:22px;border-radius:50%;flex:none;background:var(--paper2);color:var(--olive);
    font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .opt:active{transform:scale(.99)}
  .opt.right{border-color:var(--right);background:#f0f6e8}
  .opt.right .lab{background:var(--right);color:#fff}
  .opt.wrong{border-color:var(--wrong);background:#faece4}
  .opt.wrong .lab{background:var(--wrong);color:#fff}
  .opt.disabled{pointer-events:none;opacity:.96}

  .explain{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:16px 16px 6px;opacity:0;max-height:0;overflow:hidden;transition:opacity .35s, max-height .45s}
  .explain.show{opacity:1;max-height:760px;padding-bottom:16px}
  .verdict{font-size:15px;font-weight:800;margin-bottom:10px}
  .verdict.ok{color:var(--right)}.verdict.no{color:var(--wrong)}
  .answer-name{font-size:18px;font-weight:800;color:var(--olive);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .answer-name .num{font-size:12px;background:var(--paper2);color:var(--sage-deep);padding:2px 8px;border-radius:8px;font-weight:800}
  .lawbadge{display:inline-block;font-size:11px;font-weight:800;color:#fff;padding:3px 10px;border-radius:9px;margin-top:8px}
  .yiquote{margin:12px 0 4px;background:linear-gradient(180deg,#f3f6e9,#eef1df);
    border:1px solid var(--sage);border-left:4px solid var(--sage-deep);border-radius:12px;padding:11px 13px}
  .yiquote .lbl{font-size:10.5px;font-weight:800;color:var(--sage-deep);letter-spacing:1px}
  .yiquote .lbl::before{content:"🌿 "}
  .yiquote .q{font-size:14.5px;color:var(--olive-dk);font-weight:700;line-height:1.7;margin-top:5px}
  .erow{margin:11px 0}
  .erow .k{font-size:11px;font-weight:800;color:var(--sage-deep);letter-spacing:1px;margin-bottom:3px}
  .erow .k::before{content:"❀ "}
  .erow .v{font-size:14px;color:var(--ink);line-height:1.78}
  .erow .v b{color:var(--olive)}

  .nextbar{margin-top:14px}
  .btn{border:none;border-radius:14px;padding:14px;font-size:15px;font-weight:800;width:100%;
    font-family:inherit;cursor:pointer;transition:transform .1s, filter .2s;letter-spacing:1px}
  .btn:active{transform:scale(.98)}
  .btn-primary{background:linear-gradient(180deg,#9fb472,#7e9050);color:#fff;box-shadow:0 8px 18px rgba(110,128,60,.35)}
  .btn-ghost{background:var(--paper2);color:var(--olive)}

  /* mode picker */
  .picker{display:flex;flex-direction:column;gap:11px;margin-top:6px}
  .pick{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:15px;cursor:pointer}
  .pick:active{transform:scale(.99)}
  .pick .pt{font-size:15px;font-weight:800;color:var(--ink)}
  .pick .pd{font-size:12.5px;color:var(--ink-soft);margin-top:5px;line-height:1.6}
  .pick.hot{border-color:var(--wrong)}
  .pick.hot .pt{color:var(--wrong)}

  /* ---------- RESULT ---------- */
  .result{text-align:center;padding:8px 6px}
  .result .medal{font-size:74px;line-height:1;margin:8px 0}
  .result .level{font-size:27px;font-weight:800;color:var(--olive);letter-spacing:1px}
  .result .score{font-size:15px;color:var(--ink-soft);margin-top:8px}
  .result .score b{color:var(--ink);font-size:18px}
  .result .blurb{font-size:14px;color:var(--ink);line-height:1.8;margin:14px 10px 6px;
    background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px}
  .result .acts{margin-top:16px;display:flex;flex-direction:column;gap:11px}

  /* ---------- 图鉴 ---------- */
  .dexsub{font-size:12px;color:var(--ink-soft);text-align:center;margin:2px 0 14px;line-height:1.6}
  .lawkey{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .lawkey span{font-size:10.5px;font-weight:700;color:#fff;padding:3px 9px;border-radius:8px}
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
  .cell{aspect-ratio:.78;border-radius:12px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;border:1px solid var(--line);font-size:10px;text-align:center;padding:4px;cursor:pointer;
    position:relative;background:#fff}
  .cell .num{position:absolute;top:3px;left:5px;font-size:9px;color:var(--ink-soft);font-weight:700}
  .cell.got{color:var(--olive);font-weight:700;border-width:1.5px}
  .cell.got .e{font-size:23px}
  .cell.locked{background:rgba(95,110,58,.05);color:#b9c2a0}
  .cell.locked .e{font-size:21px;filter:grayscale(1);opacity:.32}
  .cell .nm{margin-top:3px;line-height:1.25;word-break:keep-all}

  /* overlay (detail + share) */
  .overlay{position:fixed;inset:0;background:rgba(40,48,22,.55);display:none;
    align-items:center;justify-content:center;padding:24px;z-index:30}
  .overlay.show{display:flex}
  .sheet{width:330px;max-width:100%;background:linear-gradient(165deg,#fdfcf6,#eef1e0);border-radius:20px;
    padding:24px 22px;box-shadow:0 20px 50px rgba(0,0,0,.3);border:1px solid var(--sage);position:relative}
  .sheet .g{font-size:50px;text-align:center}
  .sheet .nm{font-size:22px;font-weight:800;color:var(--olive);text-align:center;margin-top:6px}
  .sheet .num{display:block;text-align:center;font-size:12px;color:var(--ink-soft);margin-top:4px}
  .sheet .lawbadge{display:block;width:max-content;margin:10px auto 0}
  .sheet .row{margin:12px 2px}
  .sheet .row .k{font-size:11px;font-weight:800;color:var(--sage-deep);letter-spacing:1px;margin-bottom:3px}
  .sheet .row .k::before{content:"❀ "}
  .sheet .row .v{font-size:13.5px;color:var(--ink);line-height:1.7}
  .sheet .closex{position:absolute;top:12px;right:14px;font-size:20px;color:var(--ink-soft);cursor:pointer}

  /* ---------- 招生模块 ---------- */
  .enroll{margin-top:22px;background:linear-gradient(160deg,#f3f6e9,#eef1df);
    border:1px solid var(--sage);border-radius:16px;padding:18px 18px 16px;text-align:center}
  .enroll .et{font-size:14px;font-weight:800;color:var(--olive);letter-spacing:.5px;margin-bottom:8px}
  .enroll .ed{font-size:13px;color:var(--ink-soft);line-height:1.8;margin-bottom:14px}
  .enroll .eb{display:block;background:linear-gradient(180deg,#9fb472,#7e9050);color:#fff;
    font-size:14px;font-weight:800;padding:13px;border-radius:13px;text-decoration:none;
    letter-spacing:.5px;box-shadow:0 6px 16px rgba(110,128,60,.32);transition:filter .2s}
  .enroll .eb:active{filter:brightness(.92)}

  .enroll{margin-top:20px;background:linear-gradient(160deg,#f3f6e9,#eef1df);border:1px solid #cdd9b3;
    border-radius:16px;padding:16px 18px;text-align:center}
  .enroll .et{font-size:14px;font-weight:800;color:var(--olive);margin-bottom:8px}
  .enroll .ed{font-size:13px;color:var(--ink-soft);line-height:1.8;margin-bottom:12px}
  .enroll .eb{display:block;background:linear-gradient(180deg,#9fb472,#7e9050);color:#fff;
    border-radius:12px;padding:12px;font-size:14px;font-weight:700;text-decoration:none;
    letter-spacing:.5px;box-shadow:0 6px 16px rgba(110,128,60,.3)}

  .footer{text-align:center;font-size:11px;color:#a7ad8c;margin-top:22px;line-height:1.7}
  .hide{display:none}