/* Nudge — app brand */
:root{
  --nut-dark:#4A2E0E;
  --nut-mid:#7A4E28;
  --nut-warm:#B07540;
  --nut-shell:#C9975A;
  --nut-light:#DFB98A;
  --nut-cream:#F0DFC0;
  --nut-pale:#FAF4E8;
  --nut-paler:#FDFAF3;
  --nut-ink:#2A1A06;
  --bg:#FDFAF3;
  --paper:#FFFFFF;
  --line:#EFE2C9;
  --line-soft:#F6EAD4;
  --star:#D9A441;
  --good:#5A8A4A;
  --warn:#C77B3A;
  --shadow-sm:0 1px 2px rgba(74,46,14,.05);
  --shadow-md:0 4px 18px -8px rgba(74,46,14,.16);
  --shadow-lg:0 18px 40px -22px rgba(74,46,14,.28);
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-pill:999px;
  --font-serif: "Fraunces","Source Serif Pro","Iowan Old Style", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Pretendard","Inter","Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-sans);
  color:var(--nut-ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* App shell — responsive: mobile-first 100vw, desktop centered phone-pane with side panel */
.app-wrap{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg)}
@media (min-width:900px){
  .app-wrap{
    background:
      radial-gradient(1200px 600px at 50% -10%, #F6E9CE 0%, transparent 60%),
      var(--bg);
  }
}

.app-shell{
  width:100%;
  max-width:640px;
  margin:0 auto;
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  position:relative;
  min-height:100dvh;
}
@media (min-width:900px){
  .app-shell{
    margin:28px auto;
    min-height:calc(100dvh - 56px);
    border-radius:28px;
    box-shadow:var(--shadow-lg);
    border:0.5px solid var(--line);
    overflow:hidden;
  }
}

/* Top nav inside shell */
.appbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:rgba(255,255,255,0.86);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:0.5px solid var(--line);
}
.appbar-brand{display:flex;align-items:center;gap:8px}
.brand-dot{width:24px;height:24px;background:var(--nut-dark);border-radius:50%;display:flex;align-items:center;justify-content:center}
.brand-dot i{font-size:11px;color:var(--nut-cream)}
.brand-name{font-size:16px;font-weight:600;letter-spacing:-.3px;color:var(--nut-dark)}
.appbar-back{display:flex;align-items:center;gap:6px;color:var(--nut-mid);font-size:13px;font-weight:500;padding:6px 8px;border-radius:var(--r-pill);transition:background .15s}
.appbar-back i{font-size:20px;color:var(--nut-dark)}
.appbar-back:hover{background:var(--nut-cream)}
.appbar-actions{display:flex;align-items:center;gap:6px}
.icon-btn{
  width:34px;height:34px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;color:var(--nut-mid);
  transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--nut-cream);color:var(--nut-dark)}

/* Lang toggle */
.lang-toggle{
  display:inline-flex;background:var(--nut-pale);border:0.5px solid var(--line);border-radius:var(--r-pill);
  padding:3px;font-size:11px;font-weight:600;letter-spacing:.6px;
}
.lang-toggle button{padding:4px 10px;border-radius:var(--r-pill);color:var(--nut-warm);transition:all .15s}
.lang-toggle button.on{background:var(--nut-dark);color:var(--nut-cream)}

/* Content sections */
.scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.section{padding:24px 20px}
.section-pale{background:var(--nut-pale)}
.section-cream{background:var(--nut-cream)}
.section-label{
  font-size:11px;font-weight:600;color:var(--nut-warm);
  letter-spacing:.9px;text-transform:uppercase;margin-bottom:14px;
}

/* Headings */
.h-display{font-family:var(--font-serif);font-weight:500;font-size:34px;letter-spacing:-.6px;line-height:1.12;color:var(--nut-dark)}
.h-title{font-family:var(--font-serif);font-weight:500;font-size:24px;letter-spacing:-.4px;line-height:1.2;color:var(--nut-dark)}
.h-section{font-family:var(--font-serif);font-weight:500;font-size:20px;line-height:1.3;color:var(--nut-dark);letter-spacing:-.3px}
.h-sub{font-size:14px;color:var(--nut-mid);line-height:1.65}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;padding:12px 20px;border-radius:var(--r-pill);transition:all .15s;border:0.5px solid transparent;white-space:nowrap}
.btn-primary{background:var(--nut-dark);color:var(--nut-cream)}
.btn-primary:hover{background:var(--nut-mid)}
.btn-primary:disabled{background:var(--nut-light);color:var(--nut-cream);cursor:not-allowed;opacity:.6}
.btn-ghost{border:0.5px solid var(--nut-light);color:var(--nut-mid);background:transparent}
.btn-ghost:hover{background:var(--nut-cream);border-color:var(--nut-mid)}
.btn-block{width:100%}
.btn-lg{font-size:15px;padding:14px 22px}
.btn-sm{font-size:12px;padding:7px 14px}

/* Inputs */
.input,.textarea{
  width:100%;font-size:14px;line-height:1.55;
  background:var(--paper);
  border:0.5px solid var(--line);
  color:var(--nut-ink);
  border-radius:var(--r-md);
  padding:12px 14px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.input:focus,.textarea:focus{border-color:var(--nut-mid);box-shadow:0 0 0 4px rgba(122,78,40,.08)}
.input::placeholder,.textarea::placeholder{color:var(--nut-light)}
.textarea{min-height:200px;resize:vertical;font-size:14.5px;line-height:1.7}

/* Cards & rows */
.card{background:var(--paper);border:0.5px solid var(--line);border-radius:var(--r-md);padding:16px}
.card-soft{background:var(--nut-pale);border:0.5px solid var(--line-soft);border-radius:var(--r-md);padding:16px}
.row-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--paper);border:0.5px solid var(--line);border-radius:var(--r-md);transition:border-color .15s}
.row-card:hover{border-color:var(--nut-light)}

/* Chip */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--nut-cream);color:var(--nut-mid);
  border:0.5px solid transparent;
  white-space:nowrap;
}
.chip-outline{background:transparent;border-color:var(--nut-light);color:var(--nut-mid)}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--nut-warm)}

/* Selectable tile */
.tile{
  border:0.5px solid var(--line);border-radius:var(--r-md);
  padding:14px;background:var(--paper);cursor:pointer;
  transition:all .15s;
  text-align:left;width:100%;
  display:flex;flex-direction:column;gap:6px;
}
.tile:hover{border-color:var(--nut-light);background:#FFFCF6}
.tile.on{border-color:var(--nut-mid);background:var(--nut-pale);box-shadow:0 0 0 3px rgba(176,117,64,.08)}
.tile-title{font-size:14px;font-weight:600;color:var(--nut-dark);display:flex;align-items:center;gap:8px}
.tile-desc{font-size:12.5px;color:var(--nut-mid);line-height:1.55}

/* Pill check */
.pill-check{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 12px;border-radius:var(--r-pill);
  background:var(--paper);border:0.5px solid var(--line);
  font-size:13px;color:var(--nut-mid);cursor:pointer;
  transition:all .15s;
}
.pill-check:hover{border-color:var(--nut-light);color:var(--nut-dark)}
.pill-check.on{background:var(--nut-dark);color:var(--nut-cream);border-color:var(--nut-dark)}
.pill-check .box{
  width:16px;height:16px;border-radius:50%;border:1px solid var(--nut-light);
  display:flex;align-items:center;justify-content:center;font-size:10px;
  background:var(--paper);color:transparent;
}
.pill-check.on .box{background:var(--nut-cream);color:var(--nut-dark);border-color:var(--nut-cream)}

/* Tone scale (radio bar) */
.tone-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:var(--nut-pale);border:0.5px solid var(--line);border-radius:var(--r-pill);padding:4px;gap:4px}
.tone-track button{
  position:relative;z-index:1;padding:10px 8px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:500;color:var(--nut-mid);transition:color .2s;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.tone-track button .tn{font-size:11px;color:var(--nut-warm);letter-spacing:.5px;text-transform:uppercase;font-weight:600}
.tone-track button.on{color:var(--nut-cream)}
.tone-track button.on .tn{color:var(--nut-light)}
.tone-track .slider{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 16px)/3);background:var(--nut-dark);border-radius:var(--r-pill);transition:transform .25s cubic-bezier(.4,.2,.2,1)}

/* Stars */
.stars{display:inline-flex;align-items:center;gap:2px}
.stars i{font-size:18px;color:#E8D5B0}
.stars i.fill{color:var(--star)}

/* Rank chip */
.rank{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--r-pill);
  background:var(--nut-cream);color:var(--nut-dark);
  font-size:13px;font-weight:600;letter-spacing:-.1px;
}
.rank b{font-family:var(--font-serif);font-size:18px;font-weight:600}

/* Cracking-nut loader (replaces the static bean)
   — two shell halves that wobble + split + crack open, with kernel peek + sparkles */
.nut-loader{
  position:relative;width:120px;height:120px;
  display:flex;align-items:center;justify-content:center;
}
.nut-loader svg{width:100%;height:100%;overflow:visible}

.nut-shell-l, .nut-shell-r{transform-origin:60px 60px}
.nut-shell-l{animation:shellL 2.4s cubic-bezier(.45,.05,.55,.95) infinite}
.nut-shell-r{animation:shellR 2.4s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes shellL{
  0%,18%   { transform: rotate(0deg) translate(0,0); }
  42%      { transform: rotate(-12deg) translate(-2px,1px); }
  58%      { transform: rotate(-22deg) translate(-5px,2px); }
  82%      { transform: rotate(-4deg) translate(-1px,0); }
  100%     { transform: rotate(0deg) translate(0,0); }
}
@keyframes shellR{
  0%,18%   { transform: rotate(0deg) translate(0,0); }
  42%      { transform: rotate(12deg) translate(2px,1px); }
  58%      { transform: rotate(22deg) translate(5px,2px); }
  82%      { transform: rotate(4deg) translate(1px,0); }
  100%     { transform: rotate(0deg) translate(0,0); }
}
.nut-kernel{
  transform-origin:60px 60px;
  animation:kernel 2.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes kernel{
  0%,30%   { opacity:0; transform:scale(.6); }
  55%      { opacity:1; transform:scale(1); }
  75%      { opacity:.85; transform:scale(1); }
  100%     { opacity:0; transform:scale(.6); }
}
.nut-glow{
  transform-origin:60px 60px;
  animation:glow 2.4s ease-in-out infinite;
}
@keyframes glow{
  0%,30%   { opacity:0; transform:scale(.4); }
  55%      { opacity:.8; transform:scale(1.4); }
  100%     { opacity:0; transform:scale(.4); }
}
.nut-spark{ animation: spark 2.4s ease-out infinite; transform-origin:60px 60px; opacity:0; }
.nut-spark.s1{ animation-delay:.5s }
.nut-spark.s2{ animation-delay:.7s }
.nut-spark.s3{ animation-delay:.9s }
@keyframes spark{
  0%   { opacity:0; transform:translate(0,0) scale(.4) }
  45%  { opacity:0; transform:translate(0,0) scale(.4) }
  60%  { opacity:1; transform:translate(var(--dx,0px), var(--dy,0px)) scale(1) }
  95%  { opacity:0; transform:translate(calc(var(--dx,0px)*1.8), calc(var(--dy,0px)*1.8 - 14px)) scale(.7) }
  100% { opacity:0 }
}
.nut-base{ animation: base 2.4s ease-in-out infinite; transform-origin:60px 60px; }
@keyframes base{
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-4px) }
}

/* Inline highlight */
mark.hl{background:rgba(217,164,65,.22);color:inherit;padding:1px 2px;border-radius:3px;border-bottom:1px dashed rgba(176,117,64,.4)}
mark.hl-strong{background:rgba(217,164,65,.42);color:inherit;padding:1px 2px;border-radius:3px}
mark.hl-warn{background:rgba(199,123,58,.20);color:inherit;padding:1px 2px;border-radius:3px;border-bottom:1px wavy var(--warn);text-decoration:underline wavy var(--warn) 1px}

/* Divider */
.hr{height:0.5px;background:var(--line);margin:0}
.hr-soft{height:0.5px;background:var(--line-soft);margin:0}

/* Fade-in */
.fade{animation:fade .35s ease-out both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Drilldown sheet for desktop sidebar — keep simple list */
.list-divide > * + *{border-top:0.5px solid var(--line-soft)}

/* Scrollbar polish */
.scroll::-webkit-scrollbar{width:8px;height:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--nut-light);border-radius:8px}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--nut-warm)}

/* Step dots */
.step-dots{display:flex;gap:6px;align-items:center}
.step-dots .d{width:6px;height:6px;border-radius:50%;background:var(--nut-cream)}
.step-dots .d.on{background:var(--nut-dark);width:18px;border-radius:6px;transition:width .25s}

/* Bottom action bar */
.bottom-bar{
  position:sticky;bottom:0;background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(140%) blur(12px);
  border-top:0.5px solid var(--line);
  padding:14px 18px;display:flex;gap:10px;align-items:center;
}

/* Tabbar */
.tabbar{
  position:sticky;bottom:0;display:flex;background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(140%) blur(12px);border-top:0.5px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 4px;font-size:11px;color:var(--nut-light);font-weight:500;
  border-radius:var(--r-md);
}
.tab i{font-size:18px}
.tab.on{color:var(--nut-dark)}

/* Sheet (modal) for tone preview */
.sheet-backdrop{position:fixed;inset:0;background:rgba(42,26,6,.4);z-index:20;display:flex;align-items:flex-end;justify-content:center;opacity:1;animation:bg-in .2s ease-out}
@keyframes bg-in{from{opacity:0}to{opacity:1}}
.sheet{
  background:var(--paper);width:100%;max-width:640px;
  border-radius:24px 24px 0 0;padding:22px 20px 26px;
  max-height:80dvh;overflow:auto;
  animation:slideup .25s cubic-bezier(.4,.2,.2,1);
}
@keyframes slideup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:900px){
  .sheet-backdrop{align-items:center}
  .sheet{border-radius:20px;max-width:520px;margin:0 20px}
}

/* Quote (sample feedback block) */
.quote{
  position:relative;padding:14px 16px 14px 22px;background:var(--nut-pale);
  border-radius:var(--r-md);font-size:13.5px;line-height:1.7;color:var(--nut-ink);
}
.quote::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--nut-warm);border-radius:2px}

/* Meter */
.meter{height:6px;background:var(--nut-cream);border-radius:999px;overflow:hidden}
.meter > span{display:block;height:100%;background:linear-gradient(90deg,var(--nut-warm),var(--nut-dark));border-radius:999px;transition:width .8s cubic-bezier(.4,.2,.2,1)}

/* Result tile (per dimension) */
.dim-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:16px;padding:14px 0;
}
.dim-row + .dim-row{border-top:0.5px solid var(--line-soft)}
.dim-name{font-size:14px;font-weight:600;color:var(--nut-dark)}
.dim-meta{font-size:12px;color:var(--nut-warm);margin-top:2px}
.dim-score{font-family:var(--font-serif);font-size:20px;color:var(--nut-dark);font-weight:500;text-align:right;min-width:48px}

/* Action chip group */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}

/* Compose preview pill */
.essay-meta{display:flex;gap:14px;color:var(--nut-warm);font-size:12px;letter-spacing:.2px}
.essay-meta span{display:inline-flex;align-items:center;gap:4px}

/* Sheet handle */
.sheet-handle{width:36px;height:4px;background:var(--nut-light);border-radius:4px;margin:0 auto 14px}

/* Toggle */
.switch{
  position:relative;width:38px;height:22px;background:var(--nut-cream);border-radius:999px;
  transition:background .2s;cursor:pointer;flex-shrink:0;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .2s;
}
.switch.on{background:var(--nut-dark)}
.switch.on::after{transform:translateX(16px)}

/* Hide ti icon spans on load when font missing (graceful) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Highlights underline subtle for inline annotations */
.annot-passage{font-size:14.5px;line-height:1.85;color:var(--nut-ink)}
.annot-passage p + p{margin-top:1em}
.annot-note{
  background:var(--paper);border:0.5px solid var(--line);border-left:3px solid var(--nut-warm);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:12px 14px;font-size:13px;line-height:1.65;color:var(--nut-mid);
}
.annot-note b{color:var(--nut-dark);font-weight:600}

/* Hex chart container */
.chart-wrap{display:flex;justify-content:center;padding:8px 30px 4px;overflow:visible}

/* Skeleton */
.sk{background:linear-gradient(90deg,var(--nut-pale),var(--nut-cream),var(--nut-pale));background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:6px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Footer in result */
.footer-soft{padding:18px;text-align:center;color:var(--nut-light);font-size:11px;letter-spacing:.4px}

/* Global icon sizing default */
i.ti{display:inline-flex;line-height:1;align-items:center;justify-content:center}
button i.ti, .row-card i.ti, .tile i.ti, .pill-check i.ti, .chip i.ti{font-size:16px}
.num-badge{
  width:22px;height:22px;border-radius:50%;background:var(--nut-dark);color:var(--nut-cream);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;
}