/* ===========================================================
   Fun Color — Premium Glassmorphism Theme
   Mobile-first (320–430px), tablet (768–1366px), desktop (1280px+)
   =========================================================== */

:root{
  --violet:#7c3aed;
  --violet-2:#a78bfa;
  --pink:#ec4899;
  --orange:#fb923c;
  --bg-top:#241242;
  --bg-bot:#0f0a1e;
  --glass-bg:rgba(255,255,255,0.08);
  --glass-border:rgba(255,255,255,0.16);
  --glass-strong:rgba(255,255,255,0.14);
  --text:#f5f3fb;
  --muted:#b8b3d1;
  --danger:#f87171;
  --good:#34d399;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
}

/* ===== Reset & native-app behaviour ===== */
*, *::before, *::after{ box-sizing:border-box; }
html, body{
  height:100%;
  overscroll-behavior:none;           /* no rubber-band / bounce */
}
html{
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;          /* no double-tap zoom */
}
body{
  margin:0;
  min-height:100dvh;                  /* dynamic viewport height */
  font-family:'Comic Sans MS', 'Comic Sans', 'Comic Neue', 'Chalkboard SE', 'Marker Felt', -apple-system, BlinkMacSystemFont, sans-serif;
  background:radial-gradient(circle at 15% -10%, var(--bg-top) 0%, var(--bg-bot) 60%);
  color:var(--text);
  overflow:hidden;                    /* app shell owns scrolling per-view */
  -webkit-user-select:none;
  user-select:none;                   /* no accidental text selection */
  -webkit-touch-callout:none;         /* no callout on long-press */
}

/* Allow selection only in explicit input fields */
input, textarea{
  -webkit-user-select:text;
  user-select:text;
}

/* Disable image/element dragging app-wide */
img, canvas{
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-touch-callout:none;
  pointer-events:auto;
}

a{ -webkit-touch-callout:none; }

::selection{ background:var(--pink); color:#fff; }

/* ===== Screens & Views ===== */
.screen{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  height:100dvh; width:100vw;
}
.hidden{ display:none !important; }

.view{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  height:100%;
  background:transparent;
}

.safe-top{ padding-top:calc(12px + var(--safe-top)); }
.safe-bottom{ padding-bottom:calc(16px + var(--safe-bottom)); }

/* ===== Splash ===== */
.splash{
  align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%, var(--bg-top), var(--bg-bot));
  gap:14px;
}
.splash-logo img{ border-radius:28px; box-shadow:0 20px 60px rgba(124,58,237,0.45); }
.splash-title{ font-size:30px; font-weight:800; letter-spacing:0.5px;
  background:linear-gradient(90deg,var(--violet-2),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.splash-tag{ color:var(--muted); font-size:14px; }
.spinner{ width:28px; height:28px; border-radius:50%; margin-top:10px;
  border:3px solid rgba(255,255,255,0.15); border-top-color:var(--pink);
  animation:spin 0.9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== Glass card base ===== */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ===== Auth screens ===== */
#authScreen, #setPasswordScreen{
  align-items:center; justify-content:center;
  padding:20px calc(20px + var(--safe-left)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-right));
}
.auth-card{
  width:100%; max-width:400px;
  border-radius:var(--radius-lg);
  padding:32px 26px;
  text-align:center;
}
.auth-logo{ width:64px; height:64px; border-radius:18px; margin-bottom:10px; }
.auth-card h1{ margin:4px 0 2px; font-size:24px; }
.muted{ color:var(--muted); font-size:13px; }
.field{ display:block; text-align:left; margin:14px 0; }
.field span{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.field input{
  width:100%; padding:14px 14px; font-size:16px; border-radius:var(--radius-sm);
  border:1px solid var(--glass-border); background:rgba(255,255,255,0.06); color:var(--text);
  min-height:48px;
}
.field input:focus{ outline:2px solid var(--pink); outline-offset:1px; }

.btn-primary{
  width:100%; min-height:48px; margin-top:8px; border:none; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--violet),var(--pink));
  color:#fff; font-size:16px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 20px rgba(236,72,153,0.35);
}
.btn-primary:active{ transform:scale(0.98); }
.btn-secondary{
  min-height:48px; border-radius:var(--radius-sm); border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.08); color:var(--text); font-size:14px; font-weight:600; cursor:pointer;
}
.btn-secondary.full, .btn-danger.full{ width:100%; margin-top:10px; }
.btn-danger{
  min-height:48px; border-radius:var(--radius-sm); border:none;
  background:linear-gradient(135deg,#dc2626,#f87171); color:#fff; font-weight:700; cursor:pointer;
}
.btn-link{
  background:none; border:none; color:var(--violet-2); font-size:13px; margin-top:16px; cursor:pointer; text-decoration:underline;
}
.auth-msg{ min-height:20px; font-size:13px; color:var(--danger); margin-top:8px; }
.auth-footer{ margin-top:20px; display:flex; align-items:center; justify-content:center; gap:8px; }
.badge{
  background:linear-gradient(135deg,var(--violet),var(--pink)); padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700;
}
.center{ text-align:center; } .small{ font-size:11px; }

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(5,2,15,0.6);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
}
@media (min-width:700px){ .modal-overlay{ align-items:center; } }
.modal{
  width:100%; max-width:440px; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:20px calc(18px + var(--safe-left)) calc(20px + var(--safe-bottom)) calc(18px + var(--safe-right));
  max-height:80dvh; overflow-y:auto;
}
@media (min-width:700px){ .modal{ border-radius:var(--radius-lg); } }
.modal-head{ display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:16px; margin-bottom:8px; }
.device-list{ display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.device-item{
  border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:12px;
  background:rgba(255,255,255,0.05);
}
.device-item .di-top{ display:flex; justify-content:space-between; font-weight:600; font-size:14px; }
.device-item .di-meta{ font-size:11px; color:var(--muted); margin-top:4px; }
.device-item button{
  margin-top:8px; width:100%; min-height:40px; border:none; border-radius:8px;
  background:linear-gradient(135deg,#dc2626,#f87171); color:#fff; font-weight:600; cursor:pointer;
}

/* ===== App shell / topbar ===== */
#appShell{ background:transparent; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + var(--safe-top)) calc(14px + var(--safe-right)) 10px calc(14px + var(--safe-left));
  gap:10px;
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:17px; }
.brand img{ border-radius:8px; }
.topbar-actions{ display:flex; gap:6px; }
.icon-btn{
  min-width:44px; min-height:44px; border-radius:12px; border:1px solid var(--glass-border);
  background:var(--glass-bg); color:var(--text); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:active{ transform:scale(0.94); }

/* ===== Home / tabs / category grid ===== */
.section-tabs{
  display:flex; gap:8px; padding:0 calc(14px + var(--safe-left)) 10px calc(14px + var(--safe-left));
  overflow-x:auto; scrollbar-width:none;
}
.section-tabs::-webkit-scrollbar{ display:none; }
.tab{
  min-height:40px; padding:0 16px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--glass-border); background:var(--glass-bg); color:var(--muted);
  font-size:13px; font-weight:600; cursor:pointer;
}
.tab.active{ background:linear-gradient(135deg,var(--violet),var(--pink)); color:#fff; border-color:transparent; }

.card-grid{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  padding:6px calc(14px + var(--safe-left)) 20px calc(14px + var(--safe-left));
}
@media (min-width:600px){ .card-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .card-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1280px){ .card-grid{ grid-template-columns:repeat(5,1fr); } }

.cat-card{
  border-radius:var(--radius-md); overflow:hidden; cursor:pointer; position:relative;
  aspect-ratio:1/1; border:1px solid var(--glass-border);
  background:var(--glass-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform 0.15s ease;
}
.cat-card:active{ transform:scale(0.96); }
.cat-card .emoji{ font-size:34px; margin-bottom:6px; }
.cat-card .name{ font-weight:700; font-size:13px; text-align:center; padding:0 8px; }
.cat-card .count{ font-size:11px; color:var(--muted); margin-top:2px; }
.cat-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.28;
}
.cat-card .overlay{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }

/* ===== Theme / image grid (templates + my art) ===== */
.image-grid{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:6px calc(14px + var(--safe-left)) 20px calc(14px + var(--safe-left));
}
@media (min-width:600px){ .image-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:900px){ .image-grid{ grid-template-columns:repeat(6,1fr); } }
.thumb{
  position:relative; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer;
  aspect-ratio:1/1; border:1px solid var(--glass-border); background:#fff;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb .del{
  position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,0.55); color:#fff; border:none; font-size:13px; cursor:pointer;
}

/* ===== Canvas / paint engine ===== */
#canvasView{ background:var(--bg-bot); }
#canvasView .topbar{ padding-bottom:6px; gap:6px; }
.toolbar-scroll{
  flex:1; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 0;
}
.toolbar-scroll::-webkit-scrollbar{ display:none; }
.tool-btn{
  min-width:44px; min-height:44px; border-radius:12px; border:1px solid var(--glass-border);
  background:var(--glass-bg); font-size:18px; cursor:pointer; flex-shrink:0;
}
.tool-btn.active{ background:linear-gradient(135deg,var(--violet),var(--pink)); border-color:transparent; }

.canvas-stage{
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:8px; touch-action:none; position:relative;
  background:
    linear-gradient(45deg,#1c1530 25%,transparent 25%),
    linear-gradient(-45deg,#1c1530 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#1c1530 75%),
    linear-gradient(-45deg,transparent 75%,#1c1530 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0px;
  background-color:#141024;
}
#drawCanvas{
  background:#fff; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,0.5);
  touch-action:none; max-width:100%; max-height:100%;
  -webkit-user-drag:none; user-drag:none;
}

.bottom-toolbar{
  padding:10px calc(14px + var(--safe-left)) calc(14px + var(--safe-bottom)) calc(14px + var(--safe-left));
  background:var(--glass-bg); border-top:1px solid var(--glass-border);
  backdrop-filter:blur(20px);
}
.color-row{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; scrollbar-width:none;
}
.color-row::-webkit-scrollbar{ display:none; }
.color-swatch{
  min-width:38px; min-height:38px; width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,0.35); cursor:pointer;
}
.color-swatch.active{ border-color:#fff; box-shadow:0 0 0 3px var(--pink); }
.control-row{ display:flex; align-items:center; gap:12px; }
.one-spot-color{
  width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid var(--glass-border); position:relative;
  background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);
}
.one-spot-color input[type="color"]{
  position:absolute; inset:-4px; width:52px; height:52px; border:none; cursor:pointer; opacity:0.001;
}
#brushSize{ flex:1; accent-color:var(--pink); min-height:44px; }
#brushSizeLabel{ font-size:12px; color:var(--muted); min-width:38px; text-align:right; }

/* ===== Settings ===== */
.settings-list{ flex:1; overflow-y:auto; padding:6px calc(16px + var(--safe-left)) 20px calc(16px + var(--safe-left)); display:flex; flex-direction:column; gap:14px; }
.settings-card{ border-radius:var(--radius-md); padding:16px; }
.settings-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:14px; }
.settings-row + .settings-row{ border-top:1px solid var(--glass-border); }
.switch{ position:relative; width:46px; height:26px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:rgba(255,255,255,0.15); border-radius:999px; cursor:pointer; transition:0.2s; }
.slider::before{ content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:0.2s; }
.switch input:checked + .slider{ background:linear-gradient(135deg,var(--violet),var(--pink)); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; bottom:calc(30px + var(--safe-bottom)); transform:translateX(-50%);
  background:rgba(20,14,38,0.95); border:1px solid var(--glass-border); color:#fff;
  padding:12px 20px; border-radius:999px; font-size:13px; z-index:500; box-shadow:0 8px 24px rgba(0,0,0,0.4);
  max-width:88vw; text-align:center;
}

/* ===== Desktop / mouse refinements ===== */
@media (hover:hover) and (pointer:fine){
  .cat-card:hover, .thumb:hover, .tool-btn:hover, .icon-btn:hover, .color-swatch:hover{ filter:brightness(1.1); }
  button{ cursor:pointer; }
}

/* Large screens: cap main width for readability, keep centered */
@media (min-width:1000px){
  .card-grid, .image-grid, .settings-list{ max-width:1100px; margin:0 auto; width:100%; }
}

/* ===== Profile chip (topbar) ===== */
.profile-chip{
  display:flex; align-items:center; gap:6px; min-height:40px; padding:0 12px;
  border-radius:999px; border:1px solid var(--glass-border); background:var(--glass-bg);
  color:var(--text); font-size:13px; font-weight:700; cursor:pointer; max-width:120px;
}
.profile-chip-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Writing/tracing activity grid ===== */
.trace-grid{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:6px calc(14px + var(--safe-left)) 20px calc(14px + var(--safe-left));
}
@media (min-width:600px){ .trace-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:900px){ .trace-grid{ grid-template-columns:repeat(6,1fr); } }
.trace-card{
  border-radius:var(--radius-md); border:1px solid var(--glass-border); background:var(--glass-bg);
  aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; padding:6px; text-align:center; gap:2px;
}
.trace-card:active{ transform:scale(0.95); }
.trace-card .tc-char{ font-size:26px; font-weight:800; font-family:'Comic Sans MS','Comic Neue',sans-serif; }
.trace-card .tc-emoji{ font-size:18px; }
.trace-card .tc-sub{ font-size:9px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* Writing subcategory cards reuse .cat-card styling from card-grid — extra tint class */
.cat-card.writing-card{ background:linear-gradient(135deg,rgba(124,58,237,0.18),rgba(236,72,153,0.12)); }

/* ===== Company footer / About Us ===== */
.company-footer{
  text-align:center; padding:14px; border-radius:var(--radius-md);
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-border);
}
.cf-name{ font-size:11px; font-weight:800; color:var(--text); margin:0; }
.cf-disclaimer{ font-size:10px; color:var(--muted); margin:6px 0 0; line-height:1.5; }

.about-body{ max-height:70vh; overflow-y:auto; }
.about-emoji{ text-align:center; font-size:44px; margin:4px 0; }
.about-title{ text-align:center; font-size:20px; font-weight:800; margin:0; color:var(--pink); }
.about-text{ font-size:13px; line-height:1.6; color:var(--text); }
.about-text p{ margin:0 0 10px; }
.about-text strong{ color:var(--violet-2); }

.more-from-us{ margin:16px 0; }
.more-from-us h3{ font-size:13px; font-weight:800; margin:0 0 8px; }
.mfu-link{
  display:flex; justify-content:space-between; align-items:center; text-decoration:none;
  padding:10px 12px; border-radius:12px; margin-bottom:8px; font-size:13px; font-weight:700;
}
.mfu-emerald{ background:rgba(16,185,129,0.12); color:#34d399; }
.mfu-green{ background:rgba(34,197,94,0.12); color:#4ade80; }
.mfu-violet{ background:rgba(124,58,237,0.15); color:#a78bfa; }
.mfu-blue{ background:rgba(59,130,246,0.12); color:#60a5fa; }
.mfu-amber{ background:rgba(245,158,11,0.12); color:#fbbf24; }

/* ===== Profile switcher / add-profile row ===== */
.add-profile-row{ display:flex; gap:8px; margin-top:10px; }
.add-profile-row input{
  flex:1; min-height:44px; border-radius:10px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.06); color:var(--text); padding:0 12px; font-size:14px;
}
.profile-list-item{
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px;
  background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); cursor:pointer;
}
.profile-list-item.active{ border-color:var(--pink); background:rgba(236,72,153,0.1); }
.profile-list-item .pli-avatar{ font-size:26px; }
.profile-list-item .pli-name{ font-weight:700; font-size:14px; flex:1; }
.profile-list-item .pli-del{ background:none; border:none; color:var(--danger); font-size:16px; cursor:pointer; }

/* ===== Dashboard / stat cards ===== */
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:600px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-card{
  border-radius:var(--radius-md); padding:14px; text-align:center;
  background:var(--glass-bg); border:1px solid var(--glass-border);
}
.stat-card .sc-icon{ font-size:22px; }
.stat-card .sc-value{ font-size:22px; font-weight:800; margin-top:4px; }
.stat-card .sc-label{ font-size:11px; color:var(--muted); margin-top:2px; }

.donut-wrap{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; padding:10px 0; }
.donut-legend{ display:flex; flex-direction:column; gap:6px; font-size:12px; }
.donut-legend .dl-item{ display:flex; align-items:center; gap:6px; }
.donut-legend .dl-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }

.badge-row{ display:flex; flex-wrap:wrap; gap:8px; }
.badge-pill{
  display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:linear-gradient(135deg,rgba(124,58,237,0.25),rgba(236,72,153,0.2));
  border:1px solid var(--glass-border); font-size:12px; font-weight:700;
}

.child-summary-card{
  border-radius:var(--radius-md); padding:14px; background:var(--glass-bg); border:1px solid var(--glass-border);
  display:flex; align-items:center; gap:12px; cursor:pointer;
}
.child-summary-card .csc-avatar{ font-size:30px; }
.child-summary-card .csc-name{ font-weight:800; font-size:14px; }
.child-summary-card .csc-meta{ font-size:11px; color:var(--muted); margin-top:2px; }