:root{
    --bg:#F1F3FB; --card:#FFFFFF; --card-2:#F7F8FD; --hair:#E8E9F3; --hair-2:#DFE1EE;
    --text:#1A1B2B; --text-2:#6B6F86; --text-3:#A2A5B8; --track:#E8E9F3;
    --brand:#7C83FF; --save:#34C77B; --dismiss:#FF7A8A;
    --shadow:0 14px 36px -16px rgba(60,64,140,.30); --shadow-sm:0 4px 14px -6px rgba(60,64,140,.22);
    --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{background:
      radial-gradient(700px 360px at 80% -6%,#E6ECFF 0,transparent 60%),
      radial-gradient(680px 360px at 0% 4%,#F4EAFF 0,transparent 58%),var(--bg);
    color:var(--text);font-family:var(--font);font-weight:400;display:flex;justify-content:center;overflow:hidden}
  .phone{width:100%;max-width:430px;height:100dvh;position:relative;overflow:hidden}
  .label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}

  .view{position:absolute;inset:0;display:none;flex-direction:column}
  .view.active{display:flex}

  /* header */
  .hdr{padding:16px 20px 13px;display:flex;align-items:center;justify-content:space-between;
    backdrop-filter:blur(22px) saturate(160%);background:rgba(255,255,255,.62);
    border-bottom:1px solid var(--hair);z-index:20}
  .brand{display:flex;align-items:baseline;gap:9px}
  .brand .m{font-size:22px;font-weight:700;letter-spacing:-.02em}
  .brand .s{color:var(--brand)}
  .hbtns{display:flex;align-items:center;gap:10px}
  .iconbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair-2);background:var(--card);
    color:var(--text-2);font-size:15px;font-weight:600;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm)}
  .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#8E94FF,#6E76F0);color:#fff;
    font-size:14px;font-weight:600;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px -3px rgba(124,131,255,.6)}

  /* deck */
  .deck{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:16px 18px}
  .card{position:absolute;width:calc(100% - 36px);max-width:394px;background:var(--card);
    border:1px solid var(--hair);border-radius:28px;padding:24px 24px 21px;box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:15px;will-change:transform;touch-action:pan-y}
  .card.behind{transform:scale(.94) translateY(18px);opacity:.6;box-shadow:var(--shadow-sm)}
  .card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
  .src{color:var(--brand)} .time{font-size:12px;color:var(--text-3);margin-top:4px;font-weight:500}
  .badgeWrap{flex:0 0 auto;cursor:pointer;position:relative;display:grid;place-items:center}
  .badgeWrap .hint{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;
    background:var(--brand);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;
    box-shadow:0 2px 6px rgba(124,131,255,.5);animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.65}}
  .headline{font-size:22px;line-height:1.22;font-weight:600;letter-spacing:-.02em}
  .summary{font-size:14.5px;line-height:1.5;color:var(--text-2);
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .cardfoot{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .readlink{font-size:13px;color:var(--brand);text-decoration:none;font-weight:500}
  .bookmark{background:none;border:none;cursor:pointer;color:var(--text-3);display:grid;place-items:center;padding:4px;transition:transform .15s,color .15s}
  .bookmark.active{color:var(--brand)} .bookmark svg{display:block}
  .tapline{font-size:12px;color:var(--text-3);font-weight:500}

  .stamp{position:absolute;top:24px;font-weight:700;font-size:13px;letter-spacing:.12em;padding:6px 13px;border-radius:11px;opacity:0;text-transform:uppercase}
  .stamp.save{right:22px;color:var(--save);border:2px solid var(--save);transform:rotate(8deg)}
  .stamp.dismiss{left:22px;color:var(--dismiss);border:2px solid var(--dismiss);transform:rotate(-8deg)}

  .ghint{display:flex;justify-content:space-between;align-items:center;padding:2px 36px 32px;font-size:13.5px;font-weight:600}
  .ghint .g{display:flex;align-items:center;gap:7px}
  .ghint .skip{color:var(--dismiss)} .ghint .save{color:var(--save)}
  .ghint .chev{font-size:19px;font-weight:400;opacity:.8}

  /* trace pulse */
  .trace{position:absolute;inset:0;pointer-events:none;z-index:35;overflow:visible}
  .trace path{fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;filter:drop-shadow(0 0 7px currentColor) drop-shadow(0 0 2px currentColor)}

  .empty{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-3);padding:40px}
  .empty h2{color:var(--text-2);font-size:19px;margin-bottom:8px;font-weight:600}
  .empty button{margin-top:18px;background:var(--card);border:1px solid var(--hair-2);color:var(--text);padding:11px 20px;border-radius:13px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;box-shadow:var(--shadow-sm)}

  /* login */
  #loginView{align-items:center;justify-content:center;padding:34px;gap:0}
  .login-logo{margin-bottom:22px}
  .login-title{font-size:30px;font-weight:700;letter-spacing:-.02em}
  .login-sub{font-size:15px;color:var(--text-2);margin-top:8px;text-align:center;max-width:280px;line-height:1.45}
  .login-btns{margin-top:34px;width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px}
  .lbtn{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:15px;font-size:15px;font-weight:600;cursor:pointer;border:1px solid var(--hair-2);background:var(--card);color:var(--text);box-shadow:var(--shadow-sm)}
  .lbtn.primary{background:var(--brand);color:#fff;border-color:transparent;box-shadow:0 10px 24px -10px rgba(124,131,255,.8)}
  .lbtn .gg{width:18px;height:18px;border-radius:50%;background:conic-gradient(from -45deg,#EA4335,#FBBC05,#34A853,#4285F4,#EA4335);display:inline-block}
  .login-foot{margin-top:26px;font-size:11.5px;color:var(--text-3);text-align:center;max-width:300px;line-height:1.5}

  /* profile */
  #profileView{overflow-y:auto}
  .pcontent{padding:8px 20px 40px}
  .pcard{background:var(--card);border:1px solid var(--hair);border-radius:22px;padding:22px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:16px;margin-bottom:18px}
  .pavatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#8E94FF,#6E76F0);color:#fff;font-size:24px;font-weight:600;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 6px 16px -4px rgba(124,131,255,.6)}
  .pname{font-size:19px;font-weight:600} .pemail{font-size:13px;color:var(--text-2);margin-top:2px}
  .paccess{margin-top:7px;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#E8821E;background:#FFF3E2;border:1px solid #FBE0B8;padding:3px 8px;border-radius:7px}
  .pstats{display:flex;gap:12px;margin-bottom:22px}
  .pstat{flex:1;background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:15px;text-align:center;box-shadow:var(--shadow-sm)}
  .pstat .num{font-size:24px;font-weight:700;letter-spacing:-.01em} .pstat .lab{font-size:11px;color:var(--text-3);margin-top:3px;font-weight:500}
  .psec{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin:0 4px 12px}
  .srow{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:13px 15px;margin-bottom:9px;cursor:pointer;box-shadow:var(--shadow-sm)}
  .srow .si{flex:1;min-width:0}
  .srow .st{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .srow .ss{font-size:11px;color:var(--text-3);margin-top:3px;font-weight:500}
  .srow .chev{color:var(--text-3);font-size:18px}
  .signout{margin-top:22px;width:100%;padding:13px;border-radius:15px;border:1px solid var(--hair-2);background:var(--card);color:var(--dismiss);font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm)}
  .backbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair-2);background:var(--card);color:var(--text-2);font-size:18px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm)}

  /* sheet + legend + toast (global) */
  .sheet-bg{position:fixed;inset:0;background:rgba(40,44,90,.28);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:40}
  .sheet-bg.open{opacity:1;pointer-events:auto}
  .sheet{position:absolute;left:0;right:0;bottom:0;z-index:50;background:var(--card);border-top:1px solid var(--hair);border-radius:28px 28px 0 0;padding:18px 22px 32px;box-shadow:0 -20px 50px -20px rgba(60,64,140,.25);transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.85,.25,1);max-height:86%;overflow-y:auto}
  .sheet.open{transform:none}
  .grip{width:40px;height:5px;border-radius:5px;background:var(--hair-2);margin:0 auto 18px}
  .sheet-head{display:flex;align-items:center;gap:18px;margin-bottom:4px}
  .sheet-head .n{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em}
  .sheet-head .n small{font-size:15px;color:var(--text-3);font-weight:500}
  .sheet-head .w{font-size:14px;color:var(--text-2);margin-top:5px;font-weight:500}
  .limited{margin-top:12px;font-size:12px;color:#B47714;background:#FFF6E6;border:1px solid #FBE3B0;border-radius:11px;padding:9px 12px;font-weight:500}
  .summary-l{font-size:14px;color:var(--text-2);line-height:1.55;margin:16px 0 22px}
  .grp{margin-bottom:18px}
  .gh{display:flex;align-items:center;gap:9px;margin-bottom:10px;color:var(--text-2)}
  .gh .tag{padding:3px 9px;border-radius:7px;font-weight:600;letter-spacing:.04em}
  .item{font-size:13.5px;background:var(--card-2);border:1px solid var(--hair);border-radius:13px;padding:11px 13px;margin-bottom:8px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
  .item .why{font-size:11.5px;color:var(--text-3);margin-top:3px;line-height:1.4}
  .item .delta{font-size:13px;font-weight:700;white-space:nowrap}
  .delta.minus{color:var(--dismiss)}.delta.ok{color:var(--save)}.skel{color:var(--text);font-weight:500}
  .empty-cat{font-size:12.5px;color:var(--text-3);font-style:italic}
  .foot-note{margin-top:8px;font-size:11.5px;color:var(--text-3);border-top:1px solid var(--hair);padding-top:14px;text-align:center;line-height:1.5}

  .legend-bg{position:fixed;inset:0;background:rgba(40,44,90,.2);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
  .legend-bg.open{opacity:1;pointer-events:auto}
  .legend{position:absolute;top:60px;right:16px;width:286px;background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:19px;z-index:61;box-shadow:var(--shadow);transform:translateY(-8px) scale(.96);opacity:0;pointer-events:none;transition:all .22s cubic-bezier(.2,.8,.3,1);transform-origin:top right}
  .legend.open{transform:none;opacity:1;pointer-events:auto}
  .legend h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:15px;font-weight:700}
  .legrow{display:flex;align-items:center;gap:14px;margin-bottom:15px}.legrow:last-child{margin-bottom:0}
  .legrow .lt{font-size:13px;color:var(--text-2);line-height:1.4}
  .legrow .lt b{color:var(--text);display:block;font-size:13.5px;margin-bottom:1px;font-weight:600}

  .toast{position:fixed;left:50%;bottom:94px;transform:translateX(-50%) translateY(10px);background:rgba(26,27,43,.92);color:#fff;font-size:13px;font-weight:500;padding:9px 16px;border-radius:13px;opacity:0;pointer-events:none;transition:all .25s;z-index:70;box-shadow:var(--shadow)}
  .toast.show{opacity:1;transform:translateX(-50%)}
  .snackbar{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(14px);display:flex;align-items:center;gap:12px;
    background:rgba(26,27,43,.94);color:#fff;font-size:13.5px;font-weight:500;padding:11px 12px 11px 18px;border-radius:14px;
    opacity:0;pointer-events:none;transition:all .25s;z-index:72;box-shadow:var(--shadow)}
  .snackbar.show{opacity:1;transform:translateX(-50%);pointer-events:auto}
  .snackbar button{background:none;border:none;color:#9CA3FF;font-weight:700;font-size:13.5px;cursor:pointer;padding:4px 8px}

  .refresh{position:absolute;top:60px;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;
    background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow-sm);display:grid;place-items:center;opacity:0;z-index:15;color:var(--brand)}
  .refresh svg{display:block}.refresh.spin svg{animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  #howView,#moodView{overflow-y:auto}
  .scroll-content{padding:8px 22px 40px}
  .how-hero{text-align:center;margin:6px 0 22px}
  .how-hero h2{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:10px}
  .how-hero p{font-size:14px;color:var(--text-2);margin-top:8px;line-height:1.5}
  .how-block{background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:17px;margin-bottom:13px;box-shadow:var(--shadow-sm);display:flex;gap:15px;align-items:flex-start}
  .how-block svg{flex:0 0 auto;margin-top:2px}
  .how-block .ht{font-size:15px;font-weight:600;margin-bottom:4px}
  .how-block .hd{font-size:13px;color:var(--text-2);line-height:1.5}
  .cta{margin-top:14px;width:100%;padding:15px;border-radius:15px;border:none;background:var(--brand);color:#fff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 10px 24px -10px rgba(124,131,255,.8)}

  .mapwrap{background:var(--card);border:1px solid var(--hair);border-radius:22px;padding:18px 16px 12px;box-shadow:var(--shadow-sm);margin-bottom:16px}
  .plot{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;background:var(--card-2);border:1px solid var(--hair);overflow:hidden}
  .plot .axis{position:absolute;background:var(--hair-2)}
  .plot .axis.x{left:8%;right:8%;top:50%;height:1px}.plot .axis.y{top:8%;bottom:8%;left:50%;width:1px}
  .plot .pt{position:absolute;transform:translate(-50%,-50%);cursor:pointer}
  .plot .alab{position:absolute;font-size:9px;color:var(--text-3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .insight{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:14px 16px;margin-bottom:10px;font-size:13.5px;color:var(--text-2);line-height:1.5;box-shadow:var(--shadow-sm)}
  .insight b{color:var(--text)}
  .linkbtn{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:15px 16px;margin-top:10px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text)}
  .linkbtn .chev{color:var(--text-3);font-size:18px}
  .login-link{margin-top:18px;font-size:13px;color:var(--brand);font-weight:600;cursor:pointer}

  @media (prefers-reduced-motion: reduce){*{animation:none!important}}