/* ================================================================
   Misión Familia Craft v2 · styles.css
   Screen-time portal aesthetic · Minecraft-inspired blocks
   ================================================================ */

:root {
  /* Core palette */
  --night:   #0D0D1A;
  --dark:    #13131F;
  --card:    #1E1E30;
  --card2:   #181826;
  --border:  #2E2E48;
  --border2: #3E3E58;
  --text:    #E8E8D8;
  --dim:     #888878;
  --xp:      #7FFF00;

  /* Screen types */
  --yt:      #EF4444;
  --yt-dark: #991B1B;
  --yt-glow: rgba(239,68,68,.35);
  --yt-bg:   rgba(239,68,68,.08);

  --nf:      #C026D3;
  --nf-dark: #86198F;
  --nf-glow: rgba(192,38,211,.35);
  --nf-bg:   rgba(192,38,211,.08);

  --co:      #7C3AED;
  --co-dark: #4C1D95;
  --co-glow: rgba(124,58,237,.35);
  --co-bg:   rgba(124,58,237,.08);

  /* Kid colors */
  --jorge: #39D4E6;
  --mario: #22C55E;
  --carlos:#FFD700;

  /* Layout */
  --r: 0px;
  --blk: 3px 3px 0 #000;
  --blk-in: inset 2px 2px 0 rgba(255,255,255,.1), inset -2px -2px 0 rgba(0,0,0,.35);
}

*,*::before,*::after { margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body {
  font-family:'Nunito',sans-serif;
  background:var(--night);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
body::before {
  content:'';position:fixed;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}
#app { max-width:480px;margin:0 auto;min-height:100vh;position:relative; }
@media(min-width:481px){ body{background:#07070F;} #app{border-left:3px solid var(--border);border-right:3px solid var(--border);} }

/* ── Loading ── */
#loading { position:fixed;inset:0;background:var(--night);z-index:9999;display:flex;align-items:center;justify-content:center; }
.load-box { text-align:center;padding:32px;max-width:280px;width:100%; }
.load-logo { font-size:64px;margin-bottom:16px;animation:bounce 1s ease infinite alternate; }
@keyframes bounce { to { transform:translateY(-12px); } }
.load-title { font-family:'Press Start 2P',monospace;font-size:12px;color:var(--jorge);line-height:1.9;margin-bottom:28px;text-shadow:0 0 20px var(--jorge); }
.load-bar-wrap { background:#000;border:3px solid #333;height:20px;margin-bottom:10px;overflow:hidden; }
.load-bar-fill { height:100%;width:0;background:linear-gradient(90deg,var(--xp),#ADFF2F);transition:width 1.2s ease;box-shadow:0 0 8px var(--xp); }
.load-msg { font-family:'Press Start 2P',monospace;font-size:8px;color:var(--dim); }

/* ── Saving ── */
#saving-ind { position:fixed;top:12px;right:12px;z-index:3000;background:var(--card);color:var(--xp);font-family:'Press Start 2P',monospace;font-size:8px;padding:8px 14px;border:2px solid var(--xp);box-shadow:0 0 10px rgba(127,255,0,.4);opacity:0;transition:opacity .3s;pointer-events:none; }
#saving-ind.show { opacity:1; }

/* ── Animations ── */
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation:fadeIn .25s ease; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.6} }
@keyframes glow-pulse { 0%,100%{box-shadow:0 0 8px currentColor}50%{box-shadow:0 0 20px currentColor} }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Content pads ── */
.page-content { padding:0 12px 90px;margin-top:-20px;position:relative;z-index:1; }
.section-lbl { font-family:'Press Start 2P',monospace;font-size:8px;color:var(--dim);letter-spacing:.5px;margin:20px 0 10px;text-transform:uppercase; }

/* ================================================================
   HOME HEADER
   ================================================================ */
.home-header {
  background:linear-gradient(180deg,#080814 0%,#111122 55%,#2D6A1A 55%,#3D8A24 62%,#5E3C20 62%);
  padding:32px 18px 65px;position:relative;overflow:hidden;text-align:center;color:white;
}
.home-header::before { content:'✦ ✧ ✦ ✧ ✦';position:absolute;top:10px;left:0;right:0;text-align:center;font-size:10px;color:rgba(255,255,255,.2);letter-spacing:12px; }
.home-header::after { content:'';position:absolute;bottom:-40px;left:-20%;right:-20%;height:80px;background:var(--night);border-radius:50%; }
.home-title { font-family:'Press Start 2P',monospace;font-size:14px;line-height:1.9;color:var(--jorge);text-shadow:0 0 20px var(--jorge),3px 3px 0 #000;margin-bottom:4px; }
.home-date { font-size:12px;color:rgba(255,235,140,.75);font-weight:700;margin-bottom:10px; }
.motiv-msg { background:rgba(0,0,0,.5);border:2px solid rgba(57,212,230,.4);padding:10px 14px;font-size:12px;font-weight:700;line-height:1.6;color:var(--text); }

/* ================================================================
   KID CARDS  (home screen)
   ================================================================ */
.kids-grid { display:flex;flex-direction:column;gap:10px; }

.kid-card {
  border:3px solid #000;box-shadow:var(--blk);
  overflow:hidden;cursor:pointer;
  transition:transform .15s,box-shadow .15s;
  position:relative;
}
.kid-card:active { transform:scale(.97) translate(2px,2px);box-shadow:1px 1px 0 #000; }
.kid-card:hover  { transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000; }

.kc-header { display:flex;align-items:center;gap:12px;padding:13px 14px; }
.kc-avatar { width:50px;height:50px;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0; }
.kc-name { font-family:'Press Start 2P',monospace;font-size:12px;color:white;line-height:1.6; }
.kc-sub  { font-size:10px;color:rgba(255,255,255,.6);font-weight:700;margin-top:2px; }
.kc-streak { font-size:10px;font-weight:800;color:#FFD700;margin-top:2px; }
.kc-arrow { margin-left:auto;font-size:20px;color:rgba(255,255,255,.3); }

.kc-body { background:rgba(0,0,0,.3);padding:10px 14px 13px;border-top:2px solid rgba(0,0,0,.4); }

/* Mini screen indicators on home */
.kc-screens { display:flex;gap:6px;margin-bottom:8px; }
.kcs-item {
  flex:1;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.08);
  padding:5px 6px;text-align:center;position:relative;
}
.kcs-item.unlocked { box-shadow:inset 0 0 0 1px currentColor; }
.kcs-icon { font-size:14px;display:block; }
.kcs-mins { font-family:'Press Start 2P',monospace;font-size:8px;margin-top:2px; }
.kcs-lock { position:absolute;top:2px;right:3px;font-size:8px; }

/* Mission progress bar */
.kc-progress-row { display:flex;justify-content:space-between;font-size:10px;font-weight:800;color:rgba(255,255,255,.55);margin-bottom:4px; }
.prog-bar { background:#000;border:2px solid #333;height:10px;overflow:hidden; }
.prog-bar-fill { height:100%;background:linear-gradient(90deg,var(--xp),#ADFF2F);box-shadow:0 0 6px var(--xp);transition:width .6s; }

/* Parent block (home) */
.parent-block {
  background:rgba(124,58,237,.12);border:3px solid var(--co);
  box-shadow:var(--blk),0 0 16px var(--co-glow);
  cursor:pointer;padding:16px 14px;
  display:flex;align-items:center;gap:14px;margin-top:10px;
  transition:transform .15s,box-shadow .15s;
}
.parent-block:active { transform:scale(.97) translate(2px,2px); }
.parent-block:hover  { box-shadow:5px 5px 0 #000,0 0 24px var(--co-glow);transform:translate(-2px,-2px); }
.pb-icon { font-size:28px;flex-shrink:0; }
.pb-title { font-family:'Press Start 2P',monospace;font-size:11px;color:var(--co);line-height:1.8; }
.pb-sub   { font-size:11px;color:var(--dim);font-weight:700;margin-top:3px; }
.pb-arrow { margin-left:auto;font-size:20px;color:rgba(124,58,237,.4); }
.notif { display:inline-flex;align-items:center;justify-content:center;background:#EF4444;color:white;width:18px;height:18px;font-size:10px;font-weight:900;margin-left:6px;font-family:'Nunito',sans-serif; }

/* ================================================================
   PROFILE HEADER
   ================================================================ */
.profile-header { padding:26px 16px 65px;position:relative;color:white;text-align:center; }
.profile-header::after { content:'';position:absolute;bottom:-40px;left:-20%;right:-20%;height:80px;background:var(--night);border-radius:50%; }
.prof-avatar { font-size:64px;display:block;margin-bottom:8px;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6)); }
.prof-name { font-family:'Press Start 2P',monospace;font-size:16px;text-shadow:3px 3px 0 rgba(0,0,0,.6); }
.prof-stats { display:flex;justify-content:center;gap:20px;margin-top:14px;opacity:.9; }
.pstat { text-align:center; }
.pstat-num { font-family:'Press Start 2P',monospace;font-size:16px;text-shadow:2px 2px 0 rgba(0,0,0,.5); }
.pstat-lbl { font-size:8px;font-weight:800;opacity:.65;font-family:'Press Start 2P',monospace;margin-top:4px; }

.back-btn { position:absolute;top:16px;left:14px;background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.2);width:38px;height:38px;cursor:pointer;font-size:20px;color:white;display:flex;align-items:center;justify-content:center;z-index:10; }
.back-btn:active { transform:scale(.9); }

/* ================================================================
   SCREEN TIME PORTALS  (the main new feature)
   ================================================================ */
.portals-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px; }
.portals-grid.two-col { grid-template-columns:repeat(2,1fr); }

.portal {
  border:3px solid #000;box-shadow:var(--blk);
  cursor:pointer;padding:12px 10px 14px;
  text-align:center;position:relative;overflow:hidden;
  transition:transform .15s,box-shadow .15s;
  background:var(--card2);
}
.portal:active { transform:scale(.96) translate(1px,1px);box-shadow:1px 1px 0 #000; }

/* Type colors */
.portal-youtube  { border-color:var(--yt-dark);background:var(--yt-bg); }
.portal-netflix  { border-color:var(--nf-dark);background:var(--nf-bg); }
.portal-console  { border-color:var(--co-dark);background:var(--co-bg); }

.portal.unlocked.portal-youtube { border-color:var(--yt);box-shadow:var(--blk),0 0 12px var(--yt-glow); }
.portal.unlocked.portal-netflix { border-color:var(--nf);box-shadow:var(--blk),0 0 12px var(--nf-glow); }
.portal.unlocked.portal-console { border-color:var(--co);box-shadow:var(--blk),0 0 12px var(--co-glow); }

.portal.active-timer { animation:glow-pulse 2s ease infinite; }

.portal-locked { position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;font-size:22px; }

.portal-icon  { font-size:28px;margin-bottom:4px;display:block; }
.portal-type  { font-family:'Press Start 2P',monospace;font-size:7px;color:var(--dim);margin-bottom:8px;text-transform:uppercase; }
.portal-mins  { font-family:'Press Start 2P',monospace;font-size:14px;line-height:1;margin-bottom:4px; }
.portal-sub   { font-size:9px;font-weight:800;color:var(--dim);margin-bottom:8px; }

.portal-bar-wrap { background:#000;border:2px solid #222;height:8px;overflow:hidden;margin-bottom:8px; }
.portal-bar-fill { height:100%;transition:width .6s;border-right:2px solid rgba(255,255,255,.4); }
.portal-youtube .portal-bar-fill { background:var(--yt); }
.portal-netflix .portal-bar-fill { background:var(--nf); }
.portal-console .portal-bar-fill { background:var(--co); }

.portal-btn {
  width:100%;padding:6px 4px;border:2px solid;font-family:'Press Start 2P',monospace;
  font-size:7px;cursor:pointer;transition:all .15s;background:transparent;
  letter-spacing:.5px;
}
.portal-btn-yt  { border-color:var(--yt);color:var(--yt); }
.portal-btn-yt:hover  { background:var(--yt);color:white; }
.portal-btn-nf  { border-color:var(--nf);color:var(--nf); }
.portal-btn-nf:hover  { background:var(--nf);color:white; }
.portal-btn-co  { border-color:var(--co);color:var(--co); }
.portal-btn-co:hover  { background:var(--co);color:white; }

/* ── Active timer in portal ── */
.portal-timer { padding:6px 2px; }
.pt-countdown { font-family:'Press Start 2P',monospace;font-size:16px;margin-bottom:4px; }
.pt-btns { display:flex;gap:4px; }
.pt-btn { flex:1;padding:5px 2px;border:2px solid;font-family:'Press Start 2P',monospace;font-size:7px;cursor:pointer;background:transparent;transition:all .15s; }
.pt-pause { border-color:#FCD34D;color:#FCD34D; }
.pt-stop  { border-color:#EF4444;color:#EF4444; }

/* ── Timer popup (standalone) ── */
.timer-view {
  background:var(--card);border:4px solid #000;
  box-shadow:var(--blk);padding:28px 20px;
  margin-bottom:16px;text-align:center;
}
.tv-type   { font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dim);margin-bottom:8px; }
.tv-icon   { font-size:64px;display:block;margin-bottom:8px;animation:float 2s ease infinite; }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
.tv-time   { font-family:'Press Start 2P',monospace;font-size:36px;margin-bottom:8px; }
.tv-bar    { background:#000;border:3px solid #333;height:16px;overflow:hidden;margin-bottom:14px; }
.tv-bar-fill { height:100%;transition:width 1s linear; }
.tv-btns   { display:flex;gap:10px;justify-content:center; }
.tv-btn    { padding:12px 20px;border:3px solid;font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer;background:transparent;box-shadow:3px 3px 0 #000;transition:all .15s; }
.tv-btn:active { transform:translate(2px,2px);box-shadow:1px 1px 0 #000; }
.tv-btn-pause { border-color:#FCD34D;color:#FCD34D; }
.tv-btn-stop  { border-color:#EF4444;color:#EF4444; }

/* ================================================================
   COMBO BANNER
   ================================================================ */
.combo-banner {
  background:rgba(255,215,0,.1);border:2px solid #FFD700;
  padding:10px 14px;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
  animation:comboPulse 2s ease infinite;
}
@keyframes comboPulse { 0%,100%{border-color:#FFD700}50%{border-color:rgba(255,215,0,.4)} }
.combo-icon { font-size:22px;flex-shrink:0; }
.combo-text { font-family:'Press Start 2P',monospace;font-size:8px;color:#FFD700;line-height:1.8; }
.combo-sub  { font-size:10px;font-weight:700;color:rgba(255,215,0,.7);margin-top:2px; }

/* ================================================================
   MISSION LIST
   ================================================================ */
.mission-block  { margin-bottom:18px; }
.block-title    { display:flex;align-items:center;gap:8px;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--dim);margin-bottom:8px; }

.mission-item {
  background:var(--card2);border:2px solid var(--border);
  display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:6px;
  transition:all .2s;position:relative;
}
.mission-item::before { content:'';position:absolute;left:0;top:0;bottom:0;width:4px; }
.mission-item.done    { opacity:.55;border-color:#166534; }
.mission-item.done::before    { background:#22C55E; }
.mission-item.pending         { border-color:#854D0E; }
.mission-item.pending::before { background:#FFD700; }

/* Screen type accent left bar */
.mission-item.st-youtube::before  { background:var(--yt); }
.mission-item.st-netflix::before  { background:var(--nf); }
.mission-item.st-console::before  { background:var(--co); }
.mission-item.done::before        { background:#22C55E !important; }

.mi-emoji { font-size:20px;flex-shrink:0; }
.mi-emoji-lg { font-size:28px;flex-shrink:0; }
.mi-name  { flex:1;font-size:13px;font-weight:800;color:var(--text); }
.mi-name-lg { flex:1;font-size:15px;font-weight:900;color:var(--text); }
.mission-item.done .mi-name,
.mission-item.done .mi-name-lg { text-decoration:line-through;color:var(--dim); }

.mi-reward { font-size:10px;font-weight:900;flex-shrink:0;padding:3px 6px;border:2px solid;font-family:'Press Start 2P',monospace;font-size:7px; }
.mi-reward-yt { border-color:var(--yt);color:var(--yt); }
.mi-reward-nf { border-color:var(--nf);color:var(--nf); }
.mi-reward-co { border-color:var(--co);color:var(--co); }

.mi-btn { width:34px;height:34px;border:2px solid;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;background:transparent; }
.mi-btn-mark    { border-color:var(--border2);color:var(--dim); }
.mi-btn-mark:hover { border-color:var(--xp);color:var(--xp);background:rgba(127,255,0,.1);transform:scale(1.1); }
.mi-btn-done    { border-color:#22C55E;color:#22C55E;cursor:default; }
.mi-btn-pending { border-color:#FFD700;color:#FFD700;cursor:default;font-size:12px; }

/* ================================================================
   BEHAVIOR CARD
   ================================================================ */
.beh-card { background:var(--card2);border:2px solid var(--border);padding:14px;margin-bottom:14px; }
.card-title { font-family:'Press Start 2P',monospace;font-size:9px;color:var(--jorge);margin-bottom:12px; }
.beh-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.beh-item { display:flex;flex-direction:column;align-items:center;gap:4px; }
.beh-lbl  { font-size:10px;font-weight:800;color:var(--dim);text-align:center; }
.beh-hearts { display:flex;gap:5px; }
.beh-heart { font-size:18px;cursor:pointer;transition:transform .15s;opacity:.2; }
.beh-heart.on { opacity:1; }
.beh-heart:hover { transform:scale(1.3); }

/* ================================================================
   WEEKLY PROGRESS
   ================================================================ */
.weekly-card { background:var(--card2);border:2px solid var(--border);padding:13px;margin-bottom:14px; }
.wk-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:7px; }
.wk-label { font-family:'Press Start 2P',monospace;font-size:8px;color:var(--dim); }
.wk-pts   { font-size:12px;font-weight:800; }
.wk-bar   { background:#000;border:2px solid #333;height:12px;overflow:hidden; }
.wk-fill  { height:100%;background:linear-gradient(90deg,var(--xp),#ADFF2F);transition:width .6s; }

/* ================================================================
   BADGES
   ================================================================ */
.badges-card { background:var(--card2);border:2px solid #C8A800;padding:13px;margin-bottom:14px;box-shadow:0 0 12px rgba(255,215,0,.1); }
.ach-row { display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:2px solid #C8A800;padding:8px 12px;margin-bottom:6px;font-size:12px;font-weight:800;color:#FFD700; }
.ach-row:last-child { margin-bottom:0; }

/* ================================================================
   WEEKLY REWARDS (Tesoros)
   ================================================================ */
.rewards-section { background:var(--card2);border:2px solid #C8A800;padding:14px;margin-bottom:14px; }
.rewards-section h3 { font-family:'Press Start 2P',monospace;font-size:9px;color:#FFD700;margin-bottom:12px; }
.reward-row { display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:2px solid var(--border); }
.reward-row:last-child { border-bottom:none; }
.rr-emoji { font-size:24px; }
.rr-info  { flex:1; }
.rr-name  { font-size:13px;font-weight:800; }
.rr-cost  { font-size:10px;color:#FFD700;font-weight:700;margin-top:2px; }
.btn-claim { padding:7px 12px;border:2px solid;font-family:'Nunito',sans-serif;font-size:11px;font-weight:900;cursor:pointer;transition:all .15s;flex-shrink:0;background:transparent; }
.btn-claim-yes { border-color:#22C55E;color:#22C55E; }
.btn-claim-yes:hover { background:rgba(34,197,94,.15); }
.btn-claim-no  { border-color:var(--border);color:var(--dim);cursor:not-allowed; }

/* ================================================================
   PARENT PANEL
   ================================================================ */
.parent-header { background:linear-gradient(135deg,#0D0D20,#141428);padding:26px 16px 65px;position:relative;color:white;border-bottom:4px solid var(--co); }
.parent-header::after { content:'';position:absolute;bottom:-40px;left:-20%;right:-20%;height:80px;background:var(--night);border-radius:50%; }
.parent-header h1 { font-family:'Press Start 2P',monospace;font-size:13px;line-height:1.8;color:var(--co);text-shadow:0 0 12px var(--co-glow); }
.parent-header p  { font-size:11px;color:var(--dim);font-weight:700;margin-top:6px; }

.tabs { display:flex;background:var(--card2);border:2px solid var(--border);margin-bottom:16px;overflow-x:auto;scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab-btn { flex:1;min-width:50px;padding:10px 5px;border:none;background:none;font-family:'Press Start 2P',monospace;font-size:7px;color:var(--dim);cursor:pointer;transition:all .2s;white-space:nowrap;text-align:center;border-right:1px solid var(--border); }
.tab-btn:last-child { border-right:none; }
.tab-btn.active { background:var(--co);color:white; }

/* Validation items */
.val-item { background:var(--card2);border:2px solid #C8A800;padding:12px;margin-bottom:8px;display:flex;align-items:center;gap:10px; }
.vi-info  { flex:1; }
.vi-who   { font-size:13px;font-weight:900; }
.vi-task  { font-size:10px;color:var(--dim);font-weight:700;margin-top:2px; }
.vi-btns  { display:flex;gap:6px; }
.btn-ok   { width:36px;height:36px;border:2px solid #22C55E;color:#22C55E;background:transparent;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.btn-ok:hover { background:rgba(34,197,94,.15); }
.btn-no   { width:36px;height:36px;border:2px solid #EF4444;color:#EF4444;background:transparent;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.btn-no:hover { background:rgba(239,68,68,.15); }

/* Forms */
.form-card { background:var(--card2);border:2px solid var(--border);padding:16px;margin-bottom:14px; }
.form-card h3 { font-family:'Press Start 2P',monospace;font-size:9px;color:var(--jorge);margin-bottom:14px; }
.form-group { margin-bottom:12px; }
.form-label { display:block;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--dim);margin-bottom:5px; }
.form-input { width:100%;padding:9px 12px;background:var(--dark);border:2px solid var(--border);color:var(--text);font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;outline:none;transition:border-color .2s; }
.form-input:focus { border-color:var(--co); }
.form-select { width:100%;padding:9px 36px 9px 12px;background:var(--dark);border:2px solid var(--border);color:var(--text);font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888878' fill='none' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }

.btn-primary { background:var(--co);color:white;border:2px solid var(--co-dark);box-shadow:3px 3px 0 #000;padding:11px 16px;width:100%;font-family:'Press Start 2P',monospace;font-size:9px;cursor:pointer;transition:all .15s; }
.btn-primary:active { transform:translate(2px,2px);box-shadow:1px 1px 0 #000; }
.btn-secondary { background:var(--card2);color:var(--text);border:2px solid var(--border);box-shadow:2px 2px 0 #000;padding:8px 14px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;cursor:pointer;transition:all .15s; }
.btn-secondary:active { transform:translate(1px,1px);box-shadow:1px 1px 0 #000; }
.btn-danger { background:rgba(239,68,68,.1);color:#EF4444;border:2px solid #EF4444;padding:6px 12px;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;cursor:pointer;transition:all .15s; }
.btn-danger:hover { background:rgba(239,68,68,.2); }

/* Task manage */
.task-manage { background:var(--dark);border:2px solid var(--border);padding:10px 12px;margin-bottom:6px;display:flex;align-items:center;gap:10px; }
.tm-info { flex:1; }
.tm-name { font-size:13px;font-weight:800;color:var(--text); }
.tm-meta { font-size:10px;color:var(--dim);font-weight:700;margin-top:2px; }
.kid-sec-hdr { display:flex;align-items:center;gap:8px;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--dim);margin:14px 0 8px; }

/* Screen time parent tab */
.screen-time-card { background:var(--card2);border:2px solid var(--border);padding:14px;margin-bottom:12px; }
.screen-time-card h3 { font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dim);margin-bottom:12px; }
.st-row { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border); }
.st-row:last-child { border-bottom:none; }
.st-icon { font-size:18px;flex-shrink:0;width:24px; }
.st-info { flex:1; }
.st-name { font-size:12px;font-weight:800;color:var(--text); }
.st-detail { font-size:10px;color:var(--dim);font-weight:700; }
.st-btns { display:flex;gap:5px;flex-shrink:0; }
.st-adj { padding:5px 8px;border:2px solid var(--border);color:var(--text);background:transparent;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;cursor:pointer;transition:all .15s; }
.st-adj:hover { border-color:var(--co);color:var(--co); }

/* Limit edit grid */
.limits-grid { display:grid;grid-template-columns:auto 1fr 1fr;gap:6px;align-items:center;margin-top:8px; }
.limits-grid .lh { font-family:'Press Start 2P',monospace;font-size:7px;color:var(--dim);text-align:center; }
.limits-grid .li { font-size:11px;font-weight:800;color:var(--dim);padding-right:4px; }
.limits-input { background:var(--dark);border:2px solid var(--border);color:var(--text);font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;padding:5px 6px;width:100%;text-align:center; }
.limits-input:focus { border-color:var(--co);outline:none; }

/* Stats bars */
.stats-card { background:var(--card2);border:2px solid var(--border);padding:16px;margin-bottom:12px; }
.stats-card h3 { font-family:'Press Start 2P',monospace;font-size:8px;color:var(--jorge);margin-bottom:14px; }
.bar-list { display:flex;flex-direction:column;gap:11px; }
.bar-row  { display:flex;align-items:center;gap:8px; }
.bar-lbl  { font-size:12px;font-weight:800;width:54px;flex-shrink:0; }
.bar-wrap { flex:1;background:#000;border:2px solid #333;height:12px;overflow:hidden; }
.bar-fill { height:100%;transition:width .8s; }
.bar-val  { font-size:10px;font-weight:800;color:var(--dim);width:32px;text-align:right;flex-shrink:0; }

/* Bonus / selector */
.kid-selector { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }
.kid-sel { background:var(--dark);color:var(--text);border:2px solid var(--border);padding:9px 5px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;cursor:pointer;text-align:center;transition:all .2s; }
.kid-sel.sel { border-color:var(--co);background:rgba(124,58,237,.15);color:var(--co); }
.type-row { display:flex;gap:7px; }
.type-btn { flex:1;background:var(--dark);color:var(--text);border:2px solid var(--border);padding:9px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;cursor:pointer;text-align:center;transition:all .2s; }
.type-btn.sel-pos { border-color:#22C55E;background:rgba(34,197,94,.1);color:#22C55E; }
.type-btn.sel-neg { border-color:#EF4444;background:rgba(239,68,68,.1);color:#EF4444; }

/* Settings */
.setting-row { display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:2px solid var(--border); }
.setting-row:last-child { border-bottom:none; }
.sr-label { font-size:13px;font-weight:800; }
.sr-desc  { font-size:10px;color:var(--dim);font-weight:700;margin-top:2px; }

/* Reward requests */
.rreq-item { background:var(--card2);border:2px solid #C8A800;padding:11px 13px;margin-bottom:7px;display:flex;align-items:center;gap:10px; }

/* ================================================================
   MODALS
   ================================================================ */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeBg .2s; }
@keyframes fadeBg { from{opacity:0}to{opacity:1} }
.modal { background:var(--night);border:4px solid var(--co);box-shadow:6px 6px 0 #000,0 0 30px var(--co-glow);padding:26px 20px;width:100%;max-width:300px;animation:popIn .3s ease; }
@keyframes popIn { from{transform:scale(.7);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1} }
.modal h2 { font-family:'Press Start 2P',monospace;font-size:12px;color:var(--co);text-align:center;margin-bottom:6px;line-height:1.8; }
.modal-sub { font-size:12px;color:var(--dim);text-align:center;font-weight:700;margin-bottom:20px; }
.modal-cancel { text-align:center;margin-top:14px;font-size:11px;font-weight:700;color:var(--dim);cursor:pointer;text-decoration:underline;background:none;border:none;font-family:'Nunito',sans-serif;width:100%; }

/* PIN */
.pin-dots { display:flex;justify-content:center;gap:12px;margin-bottom:6px; }
.pin-dot  { width:16px;height:16px;border:2px solid var(--border);background:var(--dark);transition:all .15s; }
.pin-dot.on { background:var(--co);border-color:var(--co);box-shadow:0 0 8px var(--co-glow); }
.pin-error { color:#EF4444;text-align:center;font-size:9px;font-weight:800;min-height:18px;margin-bottom:10px;font-family:'Press Start 2P',monospace; }
.pin-pad  { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.pin-key  { height:50px;border:2px solid var(--border);background:var(--card2);color:var(--text);font-family:'Press Start 2P',monospace;font-size:18px;cursor:pointer;transition:all .15s; }
.pin-key:active { transform:scale(.9);background:var(--co); }
.pin-key-del { background:rgba(239,68,68,.1);color:#EF4444;border-color:#EF4444;font-size:16px; }

/* Confirm */
.confirm-emoji { text-align:center;font-size:50px;margin-bottom:10px; }
.confirm-text  { text-align:center;font-size:13px;font-weight:700;color:var(--dim);margin-bottom:18px;line-height:1.6; }
.confirm-btns  { display:flex;gap:10px; }
.confirm-btns .btn-primary, .confirm-btns .btn-secondary { flex:1;text-align:center; }

/* Timer select modal */
.screen-pick { display:flex;flex-direction:column;gap:8px;margin-bottom:14px; }
.screen-pick-btn { padding:12px;border:3px solid;font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer;background:transparent;display:flex;align-items:center;gap:10px;transition:all .15s; }
.screen-pick-btn:active { transform:scale(.97); }
.screen-pick-btn.yt { border-color:var(--yt);color:var(--yt); }
.screen-pick-btn.yt:hover { background:var(--yt-bg); }
.screen-pick-btn.nf { border-color:var(--nf);color:var(--nf); }
.screen-pick-btn.nf:hover { background:var(--nf-bg); }
.screen-pick-btn.co { border-color:var(--co);color:var(--co); }
.screen-pick-btn.co:hover { background:var(--co-bg); }
.spb-mins { margin-left:auto;font-size:12px; }

/* ================================================================
   TOAST
   ================================================================ */
.toast { position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:var(--night);color:var(--text);border:2px solid var(--jorge);box-shadow:3px 3px 0 #000,0 0 12px rgba(57,212,230,.3);padding:10px 18px;font-family:'Press Start 2P',monospace;font-size:8px;line-height:1.8;z-index:2000;animation:toastA 3.5s ease forwards;white-space:nowrap;max-width:calc(100vw - 32px);text-align:center;pointer-events:none; }
@keyframes toastA { 0%{opacity:0;transform:translateX(-50%) translateY(16px)}12%{opacity:1;transform:translateX(-50%) translateY(0)}75%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-10px)} }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty { text-align:center;padding:36px 20px;color:var(--dim); }
.empty-icon { font-size:44px;margin-bottom:12px; }
.empty p { font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.8; }

/* Refresh button */
.refresh-row { display:flex;justify-content:flex-end;margin-bottom:10px; }

/* ── Portal improvements (v2 refinements) ── */
.portal {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.portal-status {
  font-size: 9px;
  font-weight: 800;
  color: var(--dim);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 6px;
  min-height: 24px;
  padding: 0 2px;
}
.portal.unlocked .portal-status { color: var(--xp); }
.portal.unlocked.portal-youtube .portal-status { color: var(--yt); }
.portal.unlocked.portal-netflix .portal-status  { color: var(--nf); }
.portal.unlocked.portal-console .portal-status  { color: var(--co); }

/* Portal unlock celebration */
@keyframes unlockPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.12); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.portal.just-unlocked { animation: unlockPop .6s ease; }

/* Mandatory gate banner */
.portal-gate-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(239,68,68,.08);
  border: 2px solid rgba(239,68,68,.3);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,140,140,.85);
  line-height: 1.5;
}
.portal-gate-msg span { font-size: 20px; flex-shrink: 0; }

/* Mission type badges */
.mi-type {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 3px 5px;
  border: 1px solid;
  flex-shrink: 0;
  white-space: nowrap;
}
.mi-type.mandatory {
  border-color: rgba(255,200,100,.4);
  color: rgba(255,200,100,.7);
  background: rgba(255,200,100,.06);
}
.mi-type.bonus {
  border-color: rgba(255,215,0,.5);
  color: #FFD700;
  background: rgba(255,215,0,.07);
}

/* Mission item mandatory muted */
.mission-item.st-mandatory-item::before { background: rgba(255,200,100,.4); }

/* Carlos big mode */
.carlos-missions .mission-item { padding: 14px 13px; }
.carlos-missions .mi-emoji-lg  { font-size: 32px; }
.carlos-missions .mi-name-lg   { font-size: 17px; line-height: 1.4; }
.carlos-missions .mi-btn       { width: 44px; height: 44px; font-size: 18px; }

/* Portals two-col: taller */
.portals-grid.two-col .portal { min-height: 190px; }

/* Weekly reward pending indicator */
.reward-row .pending-badge {
  border: 2px solid #FFD700;
  color: #FFD700;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 900;
}

/* ── Attitude semaphore ── */
.attitude-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 4px 7px;
  border: 2px solid;
  white-space: nowrap;
  line-height: 1.4;
}
.attitude-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid;
  padding: 10px 14px;
  margin: 10px 0 14px;
  position: relative;
  z-index: 1;
}
.attitude-reward-block {
  border: 2px solid;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}

/* Attitude set buttons in parent panel */
.attitude-set-btn {
  flex: 1;
  padding: 10px 5px;
  border: 2px solid var(--border);
  background: var(--dark);
  color: var(--dim);
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
  line-height: 1.8;
}
.attitude-set-btn.sel.green  { border-color: #22C55E; color: #22C55E; background: rgba(34,197,94,.1); }
.attitude-set-btn.sel.yellow { border-color: #EAB308; color: #EAB308; background: rgba(234,179,8,.1); }
.attitude-set-btn.sel.red    { border-color: #EF4444; color: #EF4444; background: rgba(239,68,68,.1); }

/* Reward tier header */
.reward-tier-hdr {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  margin: 14px 0 8px;
  letter-spacing: .5px;
}
.reward-tier-hdr:first-of-type { margin-top: 0; }

/* Gem display in rewards */
.gem-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,215,0,.08);
  border: 2px solid rgba(255,215,0,.3);
  padding: 8px 14px;
  margin-bottom: 12px;
}
.gem-icon { font-size: 22px; }
.gem-num  { font-family: 'Press Start 2P', monospace; font-size: 18px; color: #FFD700; }
.gem-lbl  { font-size: 10px; font-weight: 800; color: var(--dim); }

/* ── 3-layer intro ── */
.layers-intro {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.layers-intro::-webkit-scrollbar { display: none; }
.layer-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border: 2px solid;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
.layer-base   { border-color: rgba(255,200,100,.5); color: rgba(255,200,100,.8); }
.layer-unlock { border-color: rgba(57,212,230,.5);  color: var(--jorge); }
.layer-bonus  { border-color: rgba(255,215,0,.5);   color: #FFD700; }
.lp-sub { font-family: 'Nunito', sans-serif; font-size: 9px; font-weight: 800; opacity: .7; margin-top: 2px; }
.layer-arrow  { color: var(--dim); font-size: 14px; flex-shrink: 0; }

/* ── Block sub-labels ── */
.block-title { flex-direction: column; align-items: flex-start; gap: 0; }
.block-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  font-weight: 800;
  opacity: .6;
  margin-top: 1px;
  display: block;
}
.block-title > div { display: flex; flex-direction: column; }
.block-base   { color: rgba(255,200,100,.8); }
.block-unlock { color: var(--jorge); }
.block-bonus  { color: #FFD700; }

/* ── Home tagline ── */
.home-tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: rgba(255,255,255,.35);
  text-align: center;
  margin-top: 8px;
  letter-spacing: .5px;
  line-height: 1.8;
}

/* ── Submit-day block ── */
.submit-day-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 3px solid var(--border2);
  margin-bottom: 14px;
  background: var(--card2);
  transition: border-color .3s;
}
.submit-day-block.submitted {
  border-color: #39D4E6;
  background: rgba(57,212,230,.07);
  box-shadow: 0 0 12px rgba(57,212,230,.2);
}
.submit-day-block.approved {
  border-color: #22C55E;
  background: rgba(34,197,94,.07);
  box-shadow: 0 0 12px rgba(34,197,94,.2);
}
.sdb-icon  { font-size: 28px; flex-shrink: 0; }
.sdb-title { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--text); line-height: 1.8; }
.sdb-msg   { font-size: 11px; font-weight: 800; color: var(--dim); margin-top: 4px; line-height: 1.5; }
.submit-day-block.submitted .sdb-title { color: #39D4E6; }
.submit-day-block.approved  .sdb-title { color: #22C55E; }

/* Submit button */
.submit-btn {
  background: var(--jorge);
  color: var(--night);
  border: 3px solid #0AB5C8;
  box-shadow: 3px 3px 0 #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
  line-height: 1.6;
}
.submit-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #000; }
.submit-btn:hover  { opacity: .9; }

/* Submitted badge on home kid cards */
.kc-submitted-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #39D4E6;
  margin-top: 3px;
  animation: blink 2s step-end infinite;
}
.kc-submitted-badge.approved { color: #22C55E; animation: none; }
@keyframes blink { 50% { opacity: 0; } }

/* Submitted kids banner in validate tab */
.submitted-kids-banner {
  background: rgba(57,212,230,.08);
  border: 2px solid rgba(57,212,230,.4);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.skb-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #39D4E6;
  margin-bottom: 10px;
  animation: blink 2s step-end infinite;
}
.skb-kid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 0;
  border-bottom: 1px solid rgba(57,212,230,.15);
}
.skb-kid:last-child { border-bottom: none; }
.skb-status { font-size: 10px; font-weight: 700; color: #39D4E6; }