/* Вариант «Тетрадка»: школьная клетка, синие чернила, наклейки и стикеры */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&family=Caveat:wght@600;700&display=swap');
:root{--bg:#fdfcf6;--card:#fff;--ink:#1f2a44;--muted:#6b7590;--line:#dfe5f0;--primary:#2f5bd3;--primary-d:#2347ad;--mint:#7fd8b5;--mint-l:#a6ebd0;--peach:#ffe0cc;--lav:#e3ebff;--yel:#fff1a8;--danger:#e5484d;--r:16px;--sh:0 2px 0 #e4e9f3,0 6px 18px rgba(31,42,68,.06)}
body{font-family:Nunito,system-ui,sans-serif;background-color:var(--bg)}
/* клетка рисуется на самом приложении (на iPhone фон body бывает не виден) и чуть ярче, чтобы читалась на ярких экранах */
.app{background-color:var(--bg);background-image:linear-gradient(#d3dff2 1px,transparent 1px),linear-gradient(90deg,#d3dff2 1px,transparent 1px);background-size:22px 22px}
.sidebar{background:#fffef9;border-right:0;box-shadow:inset -3px 0 0 #f3b3b5,inset -4px 0 0 #fff}
.logo{font-family:Caveat,cursive;font-size:36px;letter-spacing:0}
.logo-icon{border-radius:50%;font-family:Nunito;font-size:20px}
.workspace-label,.eyebrow{font-family:Caveat,cursive;font-size:19px;letter-spacing:0;font-weight:700;text-transform:none}
.new-btn,.primary{border-radius:12px;box-shadow:0 4px 0 #1b3a8f}
.new-btn:active,.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #1b3a8f}
.sidebar nav button{color:#46506a;border-radius:10px}
.sidebar nav button:hover,.profile{background:#eef2fa}
.sidebar nav button.active{background:var(--yel);color:var(--ink);box-shadow:inset 4px 0 0 var(--primary)}
.sidebar-note{transform:rotate(-2deg);border-radius:4px;box-shadow:0 8px 14px rgba(0,0,0,.08);position:relative}
.sidebar-note:before{content:"";position:absolute;top:-9px;left:50%;width:64px;height:18px;margin-left:-32px;background:rgba(127,216,181,.7);transform:rotate(3deg)}
.sidebar-note strong{font-family:Caveat,cursive;font-size:22px;line-height:1.05}
h1{font-family:Caveat,cursive;font-size:46px;letter-spacing:0;line-height:1}
h1 .hello{color:var(--danger)}
.hero{background:#fff;border:2px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink)}
.hero h2{font-family:Caveat,cursive;font-size:48px;letter-spacing:0;line-height:.95}
.hero h2 span{color:var(--primary);background:linear-gradient(transparent 62%,var(--yel) 62%)}
.hero-copy>p{color:#46506a}
.speech-bubble{border:2px solid var(--ink);box-shadow:none;border-radius:14px;font-family:Caveat,cursive;font-size:21px;line-height:1.1}
.character-chip{border:2px solid var(--ink);box-shadow:none}
.section-heading h2{font-family:Caveat,cursive;font-size:32px;font-weight:700}
.action-card{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:14px}
.action-card:nth-child(1){transform:rotate(-.8deg)}.action-card:nth-child(3){transform:rotate(.8deg)}
.action-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.tile-icon{border-radius:50%}
.empty-recent{border-color:#b9c4dc;background:#fffef9}
.voice-strip,.lib-card,.panel,.stat,.subj,.icon-btn,.chip,.class-btn,.date-pill{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.voice-settings,.seg{background:#eef2fa}
.bubble{font-size:17px}
.bubble.bot{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-bottom-left-radius:4px}
.bubble.me{background:var(--primary);box-shadow:3px 3px 0 #1b3a8f}
.composer,.mobile-nav{background:#fffef9;border-top:2px solid var(--ink)}
.composer textarea{border:2px solid var(--ink)}
.round{border:2px solid var(--ink)}
.mobile-nav button.active{background:var(--yel);color:var(--ink)}
.prototype{font-family:Caveat,cursive;font-size:17px;transform:rotate(-3deg)}
.sheet{background:#fffef9;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.plan.cur{background:#eef2fa}
/* настройки */
.group,.me-card{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:14px}
.group h3{font-family:Caveat,cursive;font-size:24px;letter-spacing:0;text-transform:none;color:var(--primary);font-weight:700;padding-top:10px}
.srow{border-top:1.5px dashed #c9d3e6}
.srow .ic{border-radius:50%;border:2px solid var(--ink)}
.me-card .avatar{border:2px solid var(--ink)}
.me-card b{font-family:Caveat,cursive;font-size:28px;line-height:1}
.switch{border:2px solid var(--ink);background:#eef2fa;height:30px}.switch:before{top:2px;left:2px;border:2px solid var(--ink);box-shadow:none;width:22px;height:22px}
.switch:checked{background:var(--mint)}
.pill-btn{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.pill-btn:active{transform:translate(2px,2px);box-shadow:none}
.pill-btn.ghost{background:var(--yel);color:var(--ink)}
.plan-until{background:var(--yel);color:var(--ink);transform:rotate(-2deg);border:1.5px solid var(--ink)}
.plan-top b{font-family:Caveat,cursive;font-size:34px}
.mini-stats span{background:#fffef9;border:1.5px dashed #b9c4dc}
.mini-stats b{font-family:Caveat,cursive;font-size:32px;line-height:1;color:var(--primary)}
.seg{border:2px solid var(--ink);box-shadow:none}.seg button.on{background:var(--yel);color:var(--ink);box-shadow:none}
.bar{border:1.5px solid var(--ink);height:12px}
.switch:checked:before{transform:translateX(16px)}
.speech-bubble:after{border:2px solid var(--ink);border-top:0;border-left:0;bottom:-9px;box-shadow:none}
/* выбор помощника */
.helper-opt{border:2px solid var(--ink);border-radius:14px}
.helper-opt b{font-family:Caveat,cursive;font-size:22px}
.helper-opt.on{border-color:var(--ink);box-shadow:4px 4px 0 var(--primary);transform:rotate(-1.5deg)}
.helper-opt.on b{background:linear-gradient(transparent 60%,var(--yel) 60%)}
.hp-mini{border:2px solid var(--ink)}
/* списки, подсказка про голос, шаги */
select{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:12px;background-color:#fffef9}
.tip{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-.6deg)}
.tip b{font-family:Caveat,cursive;font-size:21px;line-height:1}
.tip-ic{border:2px solid var(--ink)}
.voice-now{border:2px dashed #b9c4dc;background:#fffef9}
.steps li{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.steps li:before{background:var(--yel);color:var(--ink);border:2px solid var(--ink);font-family:Caveat,cursive;font-size:20px}
/* токены */
.coin{box-shadow:inset 0 0 0 1.5px #e09a1a,0 0 0 1.5px var(--ink)}
.tok-left .tok{font-family:Caveat,cursive;font-size:38px;color:var(--primary)}
/* вход */
.login-btn{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.email-form input{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.or{font-family:Caveat,cursive;font-size:20px}.or:before,.or:after{background:none;border-top:1.5px dashed #b9c4dc}
/* родительский контроль и режимы */
.pin-badge,.mode-ic{border:2px solid var(--ink)}
.mode-opt{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.mode-opt b{font-family:Caveat,cursive;font-size:22px;line-height:1.05}
.mode-opt.on{background:#fff8d6;box-shadow:3px 3px 0 var(--primary)}
.mode-chip{border:1.5px solid var(--ink)}
.sub-h{border-top:1.5px dashed #c9d3e6;font-family:Caveat,cursive;font-size:22px;color:var(--primary);font-weight:700}
.name-row .avatar{border:2px solid var(--ink)}