/* Notesy web — same identity as the Android app (colors, radii, hero, bottom nav). */
:root{
  --bg:#F6F4EF;--panel:#FFFDF9;--panel2:#F0ECE5;--panel3:#E8E2D8;--border:#E0D8CB;--border-soft:#EEE8DE;
  --text:#1F1C18;--muted:#746C61;--faint:#A69A89;--accent:#5B4BFF;--accent-deep:#3F32D9;--on-accent:#FFFFFF;
  --accent-soft:#EEECFF;--accent-container:#E4E0FF;--on-accent-container:#241A78;
  --sticky:#C97812;--sticky-soft:#FFF3DB;--mint:#0F766E;--mint-soft:#E0F4EF;--mint-border:#0F766E55;
  --danger:#BE3A34;--danger-soft:#FCE9E7;--scrim:rgba(0,0,0,.4);--code-bg:#F2EEE7;--glow:#5B4BFF33;
  --avatar-start:#7C6BFF;--avatar-end:#4338CA;--flash-start:#FFFEFB;--flash-end:#F5F0E8;
  --nav-bg:#FBF9F5;--nav-indicator:#E8E4FF;--hero-start:#6355FF;--hero-end:#3A2BC8;--on-hero:#fff;--hero-muted:#DCD9FF;--hero-glass:#FFFFFF26;
  --c0:#C45A3D;--c1:#0F766E;--c2:#B67A1E;--c3:#8B5F52;--c4:#4D6B5F;--c5:#8A6A3B;
  --radius:22px;--nav-h:76px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic","Noto Naskh Arabic",Tahoma,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#111014;--panel:#1B1920;--panel2:#24222A;--panel3:#2D2A34;--border:#3A3642;--border-soft:#302C38;
  --text:#F5F1E8;--muted:#B0A7B8;--faint:#756C7F;--accent:#A9A3FF;--accent-deep:#7C75F5;--on-accent:#151225;
  --accent-soft:#2A2640;--accent-container:#322C52;--on-accent-container:#DDD9FF;
  --sticky:#F1B24A;--sticky-soft:#3A2C18;--mint:#5EEAD4;--mint-soft:#17342F;--mint-border:#5EEAD466;
  --danger:#FF8A80;--danger-soft:#3D2022;--scrim:rgba(0,0,0,.6);--code-bg:#211F26;--glow:#A9A3FF2A;
  --avatar-start:#8F82FF;--avatar-end:#5B4BFF;--flash-start:#24212A;--flash-end:#1B1920;
  --nav-bg:#1A181F;--nav-indicator:#332D52;--hero-start:#4A3ED6;--hero-end:#2C247F;--hero-muted:#E2DEFF;
  --c0:#F09070;--c1:#5EEAD4;--c2:#F1B24A;--c3:#C9A08E;--c4:#9FC4B4;--c5:#D6B57A;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]):not([data-theme=dark]){
    --bg:#111014;--panel:#1B1920;--panel2:#24222A;--panel3:#2D2A34;--border:#3A3642;--border-soft:#302C38;
    --text:#F5F1E8;--muted:#B0A7B8;--faint:#756C7F;--accent:#A9A3FF;--accent-deep:#7C75F5;--on-accent:#151225;
    --accent-soft:#2A2640;--accent-container:#322C52;--on-accent-container:#DDD9FF;
    --sticky:#F1B24A;--sticky-soft:#3A2C18;--mint:#5EEAD4;--mint-soft:#17342F;--mint-border:#5EEAD466;
    --danger:#FF8A80;--danger-soft:#3D2022;--scrim:rgba(0,0,0,.6);--code-bg:#211F26;--glow:#A9A3FF2A;
    --avatar-start:#8F82FF;--avatar-end:#5B4BFF;--flash-start:#24212A;--flash-end:#1B1920;
    --nav-bg:#1A181F;--nav-indicator:#332D52;--hero-start:#4A3ED6;--hero-end:#2C247F;--hero-muted:#E2DEFF;
    --c0:#F09070;--c1:#5EEAD4;--c2:#F1B24A;--c3:#C9A08E;--c4:#9FC4B4;--c5:#D6B57A;
    color-scheme:dark;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font)}
body{min-height:100vh}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:var(--accent);text-decoration:none}
[hidden]{display:none!important}
svg.i{width:24px;height:24px;fill:currentColor;flex:none}

/* layout: one centred column, like the phone app */
#app{max-width:760px;margin:0 auto;min-height:100vh;position:relative}
.screen{padding:18px 20px calc(var(--nav-h) + 36px)}
.screen.bare{padding-bottom:40px}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.col{display:flex;flex-direction:column}
.gap{gap:10px}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.center{text-align:center}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* type */
.h1{font-size:26px;font-weight:600;margin:0}
.h2{font-size:17px;font-weight:600;margin:0}
.label{font-size:12.5px;color:var(--muted)}
.section-title{font-size:13px;font-weight:600;color:var(--muted);margin:26px 4px 10px;letter-spacing:.02em}

/* surfaces */
.card{background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius)}
.tile{background:var(--panel2);border:1px solid var(--border-soft);border-radius:15px}
.hero{background:linear-gradient(135deg,var(--hero-start),var(--hero-end));color:var(--on-hero);border-radius:28px;box-shadow:0 8px 24px var(--glow)}
.hero .muted{color:var(--hero-muted)}
.hero .big-n{font-size:26px;font-weight:600;margin:2px 0 4px;line-height:1.3}

/* buttons & chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:100px;background:var(--accent);color:var(--on-accent);font-weight:600;border:1px solid var(--accent)}
.btn:active{transform:scale(.98)}
.btn.outline{background:transparent;color:var(--accent);border-color:var(--border)}
.btn.ghost{background:transparent;color:var(--accent);border-color:transparent}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--border)}
.btn.block{width:100%}
.btn.small{min-height:36px;padding:0 16px;font-size:13.5px}
.btn[disabled]{opacity:.55;pointer-events:none}
.icon-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--text);flex:none}
.icon-btn:hover{background:var(--panel2)}
.icon-btn.soft{background:var(--accent-soft);color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:100px;font-size:11.5px;background:var(--panel2);border:1px solid var(--border-soft);color:var(--muted)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip.pub{background:var(--mint-soft);border-color:var(--mint-border);color:var(--mint)}
.seg{display:flex;gap:4px;padding:5px;background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius)}
.seg button{flex:1;min-height:40px;border-radius:100px;color:var(--muted);font-weight:600;font-size:13.5px}
.seg button.on{background:var(--accent);color:var(--on-accent)}

/* avatar */
.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--avatar-start),var(--avatar-end));color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;flex:none;overflow:hidden;background-size:cover;background-position:center}
.avatar.lg{width:96px;height:96px;font-size:40px}
.avatar.sm{width:40px;height:40px;font-size:17px}

/* inputs */
.field{display:block;margin:0 0 14px}
.field>span{display:block;font-size:12.5px;color:var(--muted);margin:0 4px 6px}
.input,.textarea,.select{width:100%;min-height:52px;padding:12px 16px;border-radius:16px;border:1px solid var(--border);background:var(--panel2);outline:none;text-align:start}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.textarea{min-height:96px;resize:vertical;line-height:1.55}
.search{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border-radius:100px;background:var(--panel);border:1px solid var(--border-soft)}
.search input{flex:1;border:0;background:none;outline:none;min-width:0}
.error{color:var(--danger);font-size:13px;margin:6px 4px;min-height:18px}
.hint{color:var(--muted);font-size:13px}

/* bottom nav */
.nav{position:fixed;inset-inline:0;bottom:0;z-index:20;background:var(--nav-bg);border-top:1px solid var(--border-soft);padding-bottom:env(safe-area-inset-bottom)}
.nav .in{max-width:760px;margin:0 auto;display:flex;height:var(--nav-h)}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:12px;font-weight:600}
.nav a .pill{width:64px;height:32px;border-radius:16px;display:grid;place-items:center}
.nav a.on{color:var(--on-accent-container)}
.nav a.on .pill{background:var(--nav-indicator)}
.nav .dot{position:absolute;top:-2px;inset-inline-end:8px;min-width:18px;height:18px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 5px}
.fab{position:fixed;inset-inline-end:max(20px,calc(50% - 360px));bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));width:60px;height:60px;border-radius:20px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 8px 20px var(--glow);z-index:15}

/* lists */
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;cursor:pointer;min-height:56px}
.item:hover{background:var(--panel2)}
.ico{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;font-size:21px;flex:none;background:var(--panel2);border:1px solid var(--border-soft)}
.ico.sm{width:38px;height:38px;font-size:18px;border-radius:13px}
.scroll-x{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
.pin{min-width:150px;max-width:170px;padding:14px;cursor:pointer}
.empty{padding:34px 24px;text-align:center}
.empty .big{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-size:30px}
.stat{padding:16px;flex:1;text-align:center}
.stat b{display:block;font-size:28px;font-weight:600}
.caret{transition:transform .15s}
.caret.open{transform:rotate(-90deg)}

/* editor */
.editor{max-width:760px;margin:0 auto}
.title-input{width:100%;border:0;background:none;outline:none;font-size:30px;font-weight:700;padding:6px 0;text-align:start;font-family:var(--font)}
.block{display:flex;gap:8px;align-items:flex-start;position:relative;padding:2px 0}
.block .grip{opacity:0;width:28px;height:30px;display:grid;place-items:center;color:var(--faint);flex:none;border-radius:8px}
.block:hover .grip,.block:focus-within .grip{opacity:1}
.block .grip:hover{background:var(--panel2)}
@media (hover:none){.block .grip{opacity:.55}}
textarea.b-edit{display:block;border:0;background:transparent;resize:none;overflow:hidden;color:inherit;font:inherit;width:100%}
.b-edit{flex:1;min-width:0;outline:none;padding:5px 2px;white-space:pre-wrap;word-break:break-word;min-height:30px;line-height:1.7}
.b-edit.heading1,textarea.b-edit.heading1{font-size:28px;font-weight:700;line-height:1.35}
.b-edit.heading2,textarea.b-edit.heading2{font-size:22px;font-weight:700;line-height:1.4}
.b-edit.heading3,textarea.b-edit.heading3{font-size:18px;font-weight:700}
.b-quote,textarea.b-edit.b-quote{border-inline-start:4px solid var(--accent);padding-inline-start:12px;color:var(--muted);border-radius:2px}
.b-callout{background:var(--sticky-soft);border-radius:14px;padding:10px 14px;display:flex;gap:10px;flex:1}
.b-code,textarea.b-edit.b-code{font-family:var(--mono);background:var(--code-bg);border-radius:14px;padding:12px 14px;direction:ltr;text-align:left;font-size:13.5px;width:100%}
.mark{flex:none;min-width:24px;text-align:center;color:var(--muted);padding-top:5px;font-weight:600}
.check{width:22px;height:22px;border-radius:7px;border:2px solid var(--border);margin-top:7px;flex:none;display:grid;place-items:center;color:var(--on-accent)}
.check.on{background:var(--accent);border-color:var(--accent)}
.done{text-decoration:line-through;color:var(--faint)}
.divider{height:1px;background:var(--border);margin:16px 0;flex:1}
.table-wrap{overflow-x:auto;flex:1}
table.t{border-collapse:collapse;min-width:100%}
table.t td{border:1px solid var(--border);padding:8px 10px;min-width:90px;vertical-align:top}
.b-img{max-width:100%;border-radius:14px;display:block}
.toolbar{display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:none}
.toolbar button{flex:none;min-width:38px;height:36px;padding:0 10px;border-radius:12px;background:var(--panel2);border:1px solid var(--border-soft);font-weight:600;font-size:13px}
.save-state{font-size:12px;color:var(--faint)}
.save-state.err{color:var(--danger)}

/* flashcards */
.flash{min-height:260px;padding:28px;display:grid;place-items:center;text-align:center;font-size:21px;line-height:1.6;background:linear-gradient(160deg,var(--flash-start),var(--flash-end));cursor:pointer;white-space:pre-wrap}
.rate{display:flex;gap:10px}
.rate button{flex:1;min-height:56px;border-radius:18px;border:1px solid var(--border);background:var(--panel);font-weight:600;line-height:1.3}
.bar{height:6px;border-radius:3px;background:var(--panel3);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}

/* overlays */
.overlay{position:fixed;inset:0;background:var(--scrim);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;max-height:88vh;overflow:auto;background:var(--panel);border-radius:28px 28px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom));animation:up .18s ease-out}
.sheet.mid{border-radius:28px;margin:auto;align-self:center;max-width:440px}
.overlay.mid{align-items:center;padding:20px}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:14px 8px;min-height:52px;border-radius:14px;text-align:start}
.menu-item:hover{background:var(--panel2)}
.menu-item.danger{color:var(--danger)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:10px 0}
.emoji-grid button{height:42px;border-radius:12px;font-size:21px}
.emoji-grid button:hover,.emoji-grid button.on{background:var(--accent-soft)}
.toast{position:fixed;inset-inline:0;bottom:calc(var(--nav-h) + 24px);display:flex;justify-content:center;z-index:70;pointer-events:none}
.toast span{background:var(--text);color:var(--bg);padding:12px 20px;border-radius:100px;font-size:14px;max-width:88vw;box-shadow:0 6px 20px #0004}

/* auth */
.auth{max-width:480px;margin:0 auto;padding:40px 22px}
.logo{width:72px;height:72px;border-radius:24px;background:linear-gradient(135deg,var(--hero-start),var(--hero-end));display:grid;place-items:center;color:#fff;font-size:34px;margin:0 auto 18px;box-shadow:0 8px 24px var(--glow)}
.divider-or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:13px;margin:18px 0}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--border)}
.code-input{letter-spacing:.5em;text-align:center;font-size:24px;direction:ltr}

/* profile / community */
.badge{font-size:12px;color:var(--muted);white-space:nowrap}
.cm{padding:14px;margin-top:10px;cursor:pointer}
.like{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:100px;background:var(--panel2);border:1px solid var(--border-soft);color:var(--muted);font-weight:600}
.like.on{color:var(--danger);border-color:var(--danger)}
.pub-block{padding:3px 0}
.splash{min-height:100vh;display:grid;place-items:center;color:var(--muted)}
@media (min-width:900px){.screen{padding-top:28px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.cmt .like{min-height:30px;padding:0 10px;font-size:13px}

.avatar.xs{width:30px;height:30px;font-size:13px}
.avatar.anon{background:var(--panel3);color:var(--faint)}
.cmt{display:flex;gap:10px;padding:8px 0}
.cmt .bubble{background:var(--panel2);border:1px solid var(--border-soft);border-radius:16px;padding:9px 13px;min-width:0;flex:1}
.cmt .who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cmt .who a{color:var(--text);font-weight:700;text-decoration:none}
.cmt .who a:hover{text-decoration:underline}
.cmt .acts{display:flex;align-items:center;gap:6px;margin-top:4px}
.cmt.reply{margin-inline-start:40px}
.comment-box{background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;padding:10px}