:root {
  --bg: #09080f;
  --a1: #a78bfa; --a2: #60a5fa; --a3: #f472b6;
  --ag: rgba(167,139,250,.22); --ag2: rgba(96,165,250,.18);
  --t1: #f1f0f7; --t2: #a09cb8; --t3: #6b6780;
  --ok: #34d399; --og: rgba(52,211,153,.18); --warn: #f87171;
  --r: 14px; --r-lg: 22px;
  --sans: 'PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
  --mono: 'SF Mono','Fira Code','Consolas',monospace;
  --st: env(safe-area-inset-top,0px);
  --sb: env(safe-area-inset-bottom,16px);
  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);color:var(--t1);font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;user-select:none;
}

/* Aurora */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(167,139,250,.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(96,165,250,.08), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 80%, rgba(244,114,182,.06), transparent 60%);
  animation:aurora 20s ease-in-out infinite alternate;
}
@keyframes aurora{0%{background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(167,139,250,.10),transparent 60%),radial-gradient(ellipse 70% 50% at 80% 20%,rgba(96,165,250,.08),transparent 60%),radial-gradient(ellipse 80% 50% at 50% 80%,rgba(244,114,182,.06),transparent 60%)}100%{background:radial-gradient(ellipse 80% 60% at 50% 20%,rgba(96,165,250,.10),transparent 60%),radial-gradient(ellipse 70% 50% at 30% 70%,rgba(244,114,182,.08),transparent 60%),radial-gradient(ellipse 80% 50% at 80% 30%,rgba(167,139,250,.06),transparent 60%)}}

body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

#app{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto}

/* Header */
#app-header{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + var(--st)) 18px 10px;flex-shrink:0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);mask:linear-gradient(#000 70%,transparent);-webkit-mask:linear-gradient(#000 70%,transparent)}
#header-title{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#e2e0f0,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#header-stats{font-size:.72rem;font-weight:600;color:var(--a1);background:rgba(167,139,250,.1);padding:4px 12px;border-radius:20px;border:1px solid rgba(167,139,250,.12)}

#main-content{flex:1;overflow-y:auto;padding:0 16px 130px;-webkit-overflow-scrolling:touch}
#main-content::-webkit-scrollbar{width:0}

/* Bottom nav */
#bottom-nav{position:fixed;bottom:calc(var(--sb) + 8px);left:50%;transform:translateX(-50%);z-index:100;display:flex;gap:1px;background:rgba(24,22,40,.75);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:3px;box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.03) inset}
.nav-btn{display:flex;align-items:center;gap:5px;padding:8px 14px;background:none;border:none;color:var(--t3);font-family:var(--sans);font-size:.7rem;font-weight:600;cursor:pointer;border-radius:calc(var(--r-lg) - 3px);transition:all .2s var(--ease)}
.nav-btn.active{color:var(--t1);background:rgba(167,139,250,.12);box-shadow:0 0 12px rgba(167,139,250,.08)}
.nav-btn .nav-icon{font-size:.9rem}
.nav-btn .nav-label{display:none}
.nav-btn.active .nav-label{display:inline}

/* Today */
.today-wrap{display:flex;flex-direction:column;height:100%}
.progress-wrap{margin-bottom:10px}
.progress-info{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.progress-info span:first-child{font-size:.62rem;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.1em}
.progress-info span:last-child{font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--a1)}
.progress-bar{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));border-radius:2px;transition:width .6s var(--spring);box-shadow:0 0 16px var(--ag)}

/* Card */
.card-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.swipe-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center}

.card-ctn{width:100%;max-width:400px;height:75vh;max-height:540px;min-height:320px}

/*** FLIP: pure CSS, no 3D, no backface-visibility ***/
.card{
  position:relative;width:100%;height:100%;border-radius:var(--r);
  cursor:pointer;touch-action:manipulation;
}
/* Both faces stacked */
.card-front,.card-back{
  position:absolute;inset:0;border-radius:var(--r);
  padding:28px 22px;overflow-y:auto;
  transition:transform .15s ease-out, opacity .15s ease-out;
}
/* Front: default visible */
.card-front{
  z-index:2;opacity:1;transform:scaleX(1);
  background:linear-gradient(150deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.015) 100%);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 40px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.02) inset;
  justify-content:flex-start;align-items:flex-start;text-align:left;
  display:flex;flex-direction:column;
}
.card-front::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(167,139,250,.05),transparent 60%);border-radius:var(--r)}
/* Back: hidden by default */
.card-back{
  z-index:1;opacity:0;transform:scaleX(1);
  background:linear-gradient(150deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 100%);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 40px rgba(0,0,0,.25);
  display:flex;flex-direction:column;
}

/* Flipped state */
.card.flipped .card-front{z-index:1;opacity:0}
.card.flipped .card-back{z-index:2;opacity:1}

/* Reviewed */
.card-ctn.reviewed .card{opacity:.45;pointer-events:none;filter:grayscale(.5)}

.q-number{font-family:var(--mono);font-size:.62rem;font-weight:500;color:var(--a1);margin-bottom:24px;letter-spacing:.08em;padding:4px 12px;border-radius:12px;background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.1);align-self:flex-start}
.q-title{font-size:1rem;line-height:1.6;font-weight:600;color:var(--t1);letter-spacing:-.01em;text-align:left;width:100%}

/* Tap hint */
.card:not(.flipped) .card-front::before{content:'tap to flip';position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:.6rem;font-weight:600;color:var(--t3);letter-spacing:.08em;text-transform:uppercase}

/* Back content */
.q-answer{font-size:.8rem;line-height:1.7;color:#d4d2e0}
.q-answer h1,.q-answer h2,.q-answer h3,.q-answer h4{font-size:.84rem;font-weight:700;margin:16px 0 6px;background:linear-gradient(135deg,#e0ddf5,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.q-answer p{margin:4px 0}
.q-answer strong{color:var(--a1);font-weight:600}
.q-answer ul,.q-answer ol{margin:4px 0;padding-left:18px}
.q-answer li{margin:3px 0}
.q-answer li::marker{color:var(--a1)}
.q-answer table{width:100%;border-collapse:collapse;margin:10px 0;font-size:.7rem;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.q-answer th,.q-answer td{border:1px solid rgba(255,255,255,.06);padding:7px 9px;text-align:left}
.q-answer th{background:rgba(255,255,255,.03);font-weight:600;color:var(--t2)}
.q-answer pre{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:12px;overflow-x:auto;margin:8px 0;font-size:.7rem;line-height:1.55}
.q-answer code{font-family:var(--mono);font-size:.72rem;background:rgba(255,255,255,.05);padding:1px 5px;border-radius:3px}
.q-answer pre code{background:none;padding:0;font-size:.7rem}
.q-answer blockquote{border-left:2px solid var(--a1);padding:1px 0 1px 12px;margin:8px 0;color:var(--t2);font-style:italic}
.q-answer hr{border:none;border-top:1px solid rgba(255,255,255,.06);margin:14px 0}

.card-actions{display:flex;gap:8px;margin-top:auto;padding-top:16px}
.btn{flex:1;padding:12px;border:none;border-radius:10px;font-family:var(--sans);font-size:.76rem;font-weight:600;cursor:pointer;transition:all .15s ease-out;letter-spacing:.01em}
.btn:active{transform:scale(.97)}
.btn-mastered{background:linear-gradient(135deg,#34d399,#10b981);color:#021a10;box-shadow:0 4px 14px var(--og)}
.btn-again{background:rgba(255,255,255,.04);color:var(--t2);border:1px solid rgba(255,255,255,.08)}
.btn-again:active{background:rgba(255,255,255,.08)}

.progress-dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.08);transition:all .3s var(--ease)}
.dot.active{width:24px;border-radius:4px;background:linear-gradient(90deg,var(--a1),var(--a2));box-shadow:0 0 10px var(--ag)}
.dot.done{background:var(--ok);box-shadow:0 0 6px var(--og)}

/* Empty */
.empty-state{text-align:center;padding:80px 20px}
.empty-state .empty-icon{font-size:2.5rem;display:block;margin-bottom:14px}
.empty-state h3{font-size:.9rem;font-weight:700;margin-bottom:4px}
.empty-state p{font-size:.76rem;color:var(--t3);line-height:1.6}

/* History */
.history-hero{text-align:center;padding:4px 0 18px}
.streak-ring{display:inline-flex;align-items:center;justify-content:center;width:90px;height:90px;border-radius:50%;background:conic-gradient(from 0deg,var(--a1) var(--sd,0deg),rgba(255,255,255,.03) var(--sd,0deg));margin-bottom:8px;position:relative}
.streak-ring::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--bg)}
.streak-num{position:relative;z-index:1;font-size:1.8rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--t1),var(--a1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.streak-label{font-size:.72rem;font-weight:600;color:var(--t3);letter-spacing:.02em}
.hstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.hstat{background:rgba(255,255,255,.035);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.05);border-radius:var(--r);padding:18px 12px;text-align:center}
.hstat .val{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.hstat .val.a{background:linear-gradient(135deg,var(--a1),var(--a3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hstat .val.g{background:linear-gradient(135deg,#34d399,#6ee7b7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hstat .lbl{font-size:.6rem;font-weight:600;color:var(--t3);margin-top:4px;letter-spacing:.05em;text-transform:uppercase}
.cal-hdr{font-size:.78rem;font-weight:700;color:var(--t2);margin-bottom:10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dl{text-align:center;font-size:.6rem;font-weight:600;color:var(--t3);padding-bottom:5px}
.cal-day{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:600;background:rgba(255,255,255,.025);color:var(--t3);min-width:28px;min-height:28px}
.cal-day.d{background:linear-gradient(135deg,#34d399,#10b981);color:#021a10;box-shadow:0 2px 8px var(--og)}
.cal-day.t{box-shadow:inset 0 0 0 2px var(--a1);color:var(--a1)}

/* Settings */
.section{margin-bottom:24px}
.section h2{font-size:.6rem;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.s-card{background:rgba(255,255,255,.035);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.05);border-radius:var(--r);padding:16px;margin-bottom:6px}
.s-row{display:flex;align-items:center;justify-content:space-between}
.s-label{font-size:.84rem;font-weight:600}
.s-desc{font-size:.7rem;color:var(--t3);margin-top:2px;line-height:1.4}
input[type="number"]{width:50px;padding:8px 0;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--a1);font-family:var(--mono);font-size:.85rem;font-weight:600;text-align:center}
input[type="number"]:focus{outline:none;border-color:var(--a1);box-shadow:0 0 0 3px var(--ag)}
input[type="text"]{flex:1;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--t1);font-size:.76rem;font-family:var(--sans)}
input[type="text"]:focus{outline:none;border-color:var(--a1);box-shadow:0 0 0 3px var(--ag)}
input[type="text"]::placeholder{color:var(--t3)}
.btn-a{padding:8px 16px;border:none;border-radius:8px;font-family:var(--sans);font-size:.72rem;font-weight:700;cursor:pointer;background:linear-gradient(135deg,var(--a1),#8b5cf6);color:#fff;white-space:nowrap;transition:all .15s ease-out}
.btn-a:active{transform:scale(.96)}
.btn-g{padding:8px 16px;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-family:var(--sans);font-size:.68rem;font-weight:600;cursor:pointer;background:rgba(255,255,255,.03);color:var(--t2);white-space:nowrap;transition:all .15s ease-out}
.btn-g:active{background:rgba(255,255,255,.08)}
.btn-d{padding:8px 16px;border:1px solid rgba(248,113,113,.18);border-radius:8px;font-family:var(--sans);font-size:.68rem;font-weight:600;cursor:pointer;background:rgba(248,113,113,.06);color:var(--warn);white-space:nowrap;transition:all .15s ease-out}
.btn-d:active{background:rgba(248,113,113,.15)}
.urli{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:8px 12px;margin-top:6px;font-family:var(--mono);font-size:.64rem}
.urli span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2)}

.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(24,22,40,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);color:var(--t1);padding:8px 20px;border-radius:20px;font-size:.7rem;font-weight:600;opacity:0;pointer-events:none;z-index:200;transition:all .3s var(--spring)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes cardIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.card-ctn{animation:cardIn .4s var(--ease) both}