/* فایل: styles.css | نسخه: 3.20.0 | استایل‌های کیدوپلان */
  :root{
    --accent:#3aa0ff;
    --accent2:#7cd6c4;
    --accent3:#ffd166;
    --bg1:#eaf7ff;
    --bg2:#f3fffb;
    --card:#ffffff;
    --ink:#22303f;
    --sub:#5c7183;
    --good:#3fb984;
    --bad:#f0665e;
    --radius:20px;
    --shadow:0 10px 30px rgba(20,60,90,.10);
    --font-display:'Lalezar','Vazirmatn',sans-serif;
    --font-body:'Vazirmatn','Segoe UI',Tahoma,sans-serif;
  }
  [data-theme="girl"]{
    --accent:#ef7cb1;
    --accent2:#c99bef;
    --accent3:#ffd7ea;
    --bg1:#fff1f7;
    --bg2:#fdf3ff;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{
    font-family:var(--font-body);
    background:#dfe6ee;
    color:var(--ink);
    min-height:100vh;
    -webkit-user-select:none; -moz-user-select:none; user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
  }
  input, textarea, select{
    -webkit-user-select:text; -moz-user-select:text; user-select:text;
    -webkit-touch-callout:default;
  }
  img{ -webkit-user-drag:none; user-drag:none; pointer-events:auto; }

  /* ---- Phone shell ----
     position:fixed + inset:0 always exactly matches the CURRENT visible
     viewport as the browser continuously recomputes it - this is far more
     reliable than any vh/dvh unit or JS-measured height for avoiding both
     the "menu hidden behind system nav bar" bug and the "gap under menu
     when the toolbar hides on scroll" bug, since the browser itself keeps
     it in sync without any JS. */
  .phone-shell{
    background:linear-gradient(160deg,var(--bg1),var(--bg2) 60%);
    position:fixed;inset:0;
    margin:0 auto;
    display:flex;flex-direction:column;overflow:hidden;
  }
  .app{max-width:520px;width:100%;margin:0 auto;padding:14px 14px 8px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .app-canvas{display:contents;}

  @media (min-width:701px){
    body{display:flex;align-items:center;justify-content:center;padding:40px 20px;}
    .phone-shell{position:relative;inset:auto;width:420px;height:860px;max-height:92vh;border-radius:46px;
      box-shadow:0 40px 90px rgba(20,30,50,.35), 0 0 0 10px #1b1f24, 0 0 0 12px #33383f;}
    .phone-shell::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
      width:120px;height:22px;background:#1b1f24;border-radius:14px;z-index:30;}
    .app{padding-top:34px;}
    .bottom-nav{border-radius:0 0 36px 36px;}
  }

  /* ---- Top bar / logo ---- */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
  .brand{display:flex;align-items:center;gap:10px;}
  .logo-mark{
    width:40px;height:40px;border-radius:14px;position:relative;flex:0 0 auto;
    background:radial-gradient(circle at 32% 28%, #8fd6ff, var(--accent) 55%, #235fb8 100%);
    box-shadow:inset 0 2px 4px rgba(255,255,255,.6), inset 0 -6px 10px rgba(0,20,60,.22), 0 6px 14px rgba(30,90,180,.35);
    display:flex;align-items:center;justify-content:center;
  }
  .logo-mark::after{
    content:"";position:absolute;top:5px;left:7px;width:14px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.75);filter:blur(1.5px);
  }
  .logo-mark svg{width:26px;height:26px;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,20,50,.35));}
  .brand h1{font-family:var(--font-display);font-size:20px;margin:0;line-height:1.1;letter-spacing:.5px;}
  .brand span{display:block;font-size:10.5px;color:var(--sub);font-weight:500;}
  .year-badge{display:inline-block;background:var(--bg1);color:var(--accent);font-size:9.5px;font-weight:800;border-radius:6px;padding:1px 5px;margin-inline-start:4px;}
  .icon-btn{border:none;background:var(--card);width:38px;height:38px;border-radius:12px;
    box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;}
  .icon-btn:active{transform:scale(.94);}

  /* ---- Child switcher strip ---- */
  .child-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;margin-bottom:6px;}
  .child-avatar-wrap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;width:56px;}
  .child-avatar{width:50px;height:50px;border-radius:16px;object-fit:cover;border:2.5px solid transparent;
    box-shadow:0 2px 8px rgba(20,60,90,.10);background:var(--card);display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-size:18px;color:var(--sub);}
  .child-avatar-wrap.active .child-avatar{border-color:var(--accent);}
  .child-avatar-wrap span{font-size:10px;color:var(--sub);font-weight:600;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .child-avatar-wrap.active span{color:var(--ink);font-weight:800;}
  .child-add{width:50px;height:50px;border-radius:16px;border:2px dashed var(--accent);background:none;
    display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--accent);cursor:pointer;}

  /* Hero card */
  .hero{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;
    display:flex;gap:14px;align-items:center;position:relative;overflow:hidden;margin-bottom:14px;}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 60%, var(--accent3) 160%);opacity:.35;pointer-events:none;}
  .photo-wrap{position:relative;width:78px;height:78px;flex:0 0 auto;}
  .photo-wrap img, .photo-wrap .ph-empty{width:78px;height:78px;border-radius:22px;object-fit:cover;
    border:3px solid var(--accent);box-shadow:var(--shadow);display:block;background:var(--bg1);}
  .ph-empty{display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--sub);}
  .photo-edit{position:absolute;bottom:-4px;left:-4px;background:var(--accent);color:#fff;
    width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:12px;box-shadow:var(--shadow);border:2px solid #fff;cursor:pointer;}
  .hero-txt{flex:1;min-width:0;position:relative;z-index:1;}
  .hero-txt input.name-input{font-family:var(--font-display);font-size:18px;border:none;background:transparent;width:100%;color:var(--ink);padding:2px 0;}
  .hero-txt textarea.slogan-input{width:100%;border:none;background:transparent;resize:none;font-size:12px;color:var(--sub);line-height:1.5;padding:2px 0;font-family:var(--font-body);}

  /* Season tabs */
  .season-row-wrap{display:block;}
  .season-row{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;overflow-y:visible;padding:2px 2px 8px;}
  .season-btn{flex:1;min-width:70px;text-align:center;padding:8px 4px;border-radius:14px;border:none;
    background:var(--card);color:var(--sub);font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(20,60,90,.08);
    display:flex;flex-direction:column;align-items:center;gap:2px;}
  .season-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 4px 10px rgba(58,160,255,.25);}

  .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:14px;}
  .card h2{font-family:var(--font-display);font-size:16px;margin:0 0 10px;display:flex;align-items:center;gap:8px;font-weight:400;letter-spacing:.3px;}
  .card h2 .tag{margin-inline-start:auto;font-size:10.5px;font-weight:600;color:var(--sub);background:var(--bg1);padding:3px 8px;border-radius:10px;font-family:var(--font-body);}
  .add-btn{border:1.5px dashed var(--accent);color:var(--accent);background:none;border-radius:12px;padding:7px 10px;font-size:12px;width:100%;cursor:pointer;font-weight:700;}
  .add-btn:active{transform:scale(.98);}

  .sched-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #eef2f5;}
  .sched-row:last-child{border-bottom:none;}
  .sched-emoji{font-size:18px;width:30px;height:30px;text-align:center;flex:0 0 auto;border:none;background:none;cursor:pointer;padding:0;border-radius:6px;}
  .sched-emoji:hover{background:var(--bg1);}
  .sched-time{font-size:11px;color:var(--sub);width:64px;flex:0 0 auto;border:none;background:var(--bg1);border-radius:8px;padding:5px 2px;text-align:center;font-weight:700;}
  .sched-time-btn{font-size:11px;color:var(--ink);width:74px;flex:0 0 auto;border:none;background:var(--bg1);border-radius:8px;padding:7px 2px;
    text-align:center;font-weight:800;cursor:pointer;font-family:var(--font-body);}
  .sched-time-btn:disabled{color:var(--sub);cursor:default;}
  .tp-row{display:flex;align-items:center;gap:8px;margin:10px 0;}
  .tp-row label{font-size:11.5px;color:var(--sub);font-weight:700;flex:0 0 auto;width:60px;}
  .tp-row select{flex:1;border:1.5px solid #e5edf2;border-radius:10px;padding:9px 4px;font-size:13px;font-family:var(--font-body);background:#fff;text-align:center;}
  .tp-check-row{display:flex;align-items:center;gap:8px;margin:12px 0 4px;}
  .tp-check-row label{font-size:12px;color:var(--ink);font-weight:700;}
  .sched-title{flex:1;border:none;background:none;font-size:13px;color:var(--ink);font-weight:600;min-width:0;font-family:var(--font-body);}
  .row-del{border:none;background:none;color:#c8d0d6;font-size:16px;cursor:pointer;flex:0 0 auto;padding:2px 4px;}
  .row-del:active{color:var(--bad);}

  .task-row{padding:10px 0;border-bottom:1px solid #eef2f5;}
  .task-row:last-child{border-bottom:none;}
  .task-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
  .task-emoji{font-size:17px;width:26px;height:26px;text-align:center;border:none;background:none;cursor:pointer;padding:0;border-radius:6px;}
  .task-emoji:hover{background:var(--bg1);}
  .task-title{flex:1;border:none;background:none;font-size:13px;font-weight:700;color:var(--ink);min-width:0;font-family:var(--font-body);}
  .circles{display:flex;flex-wrap:wrap;gap:6px;}
  .circle{width:24px;height:24px;border-radius:50%;border:2px solid var(--good-c,var(--good));background:transparent;cursor:pointer;flex:0 0 auto;}
  .circle.filled{background:var(--good-c,var(--good));}
  .bad-tasks .circle{border-color:var(--bad);}
  .bad-tasks .circle.filled{background:var(--bad);}
  .task-settings{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed #eef2f5;flex-wrap:wrap;}
  .ts-toggle{border:none;background:none;color:var(--sub);font-size:14px;cursor:pointer;flex:0 0 auto;padding:2px 4px;}
  .ts-label{font-size:10px;color:var(--sub);font-weight:700;}
  .ts-btn{width:22px;height:22px;border-radius:7px;border:none;background:var(--bg1);color:var(--ink);font-weight:800;cursor:pointer;font-size:14px;line-height:1;}
  .ts-val{font-size:11.5px;font-weight:800;min-width:22px;text-align:center;display:inline-block;}

  .behavior-tabs{display:flex;gap:8px;margin-bottom:12px;}
  .behavior-tab{flex:1;border:none;padding:9px;border-radius:12px;background:var(--bg1);color:var(--sub);font-weight:800;font-size:13px;cursor:pointer;font-family:var(--font-body);}
  .behavior-tab.active.good-active{background:linear-gradient(135deg,var(--good),#63d3a3);color:#fff;}
  .behavior-tab.active.bad-active{background:linear-gradient(135deg,var(--bad),#ff9a94);color:#fff;}

  .goal-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #eef2f5;}
  .goal-row.goal-done .goal-title{text-decoration:line-through;color:var(--sub);}
  .goal-check{width:22px;height:22px;border-radius:7px;border:2px solid var(--accent);background:none;flex:0 0 auto;
    color:#fff;font-weight:800;font-size:13px;cursor:pointer;line-height:1;}
  .goal-check.checked{background:linear-gradient(135deg,var(--good),#63d3a3);border-color:var(--good);}
  .goal-pts-wrap{display:flex;align-items:center;gap:4px;flex:0 0 auto;}
  .goal-pts-wrap .ts-val{font-size:10.5px;}
  .goal-row:last-child{border-bottom:none;}
  .goal-emoji{font-size:16px;width:26px;height:26px;text-align:center;border:none;background:none;cursor:pointer;padding:0;border-radius:6px;}
  .goal-emoji:hover{background:var(--bg1);}
  .goal-title{flex:1;border:none;background:none;font-size:12.5px;font-weight:600;min-width:0;font-family:var(--font-body);}

  .go-shop-btn{width:100%;border:none;background:linear-gradient(135deg,var(--accent3),#ffb347);color:#5a3d00;
    border-radius:14px;padding:12px;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--font-body);margin-bottom:14px;}

  /* growth */
  .growth-form{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
  .growth-form input{border:none;background:var(--bg1);border-radius:10px;padding:8px;font-size:12px;font-weight:700;text-align:center;font-family:var(--font-body);}
  .growth-form input[type=date]{flex:1 1 120px;}
  .growth-form input[type=number]{flex:1 1 70px;}
  .growth-form input[type=text]{flex:2 1 140px;text-align:right;}
  .growth-submit-btn{flex:1 1 100%;border:none;background:linear-gradient(135deg,var(--good),#63d3a3);color:#fff;
    border-radius:12px;padding:11px;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--font-body);margin-top:2px;}
  .growth-entry{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eef2f5;font-size:12.5px;}
  .growth-entry .gd{color:var(--sub);width:78px;flex:0 0 auto;}
  .growth-entry .gv{font-weight:800;}
  .growth-entry .gn{flex:1;color:var(--sub);font-size:11.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mini-chart{width:100%;height:110px;margin:6px 0 14px;}

  /* bottom nav */
  .rail-brand{display:none;}
  .bottom-nav{background:var(--card);box-shadow:0 -6px 20px rgba(20,60,90,.10);display:flex;justify-content:space-around;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:20;flex:0 0 auto;}
  .nav-btn{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--sub);cursor:pointer;flex:1;font-family:var(--font-body);}
  .nav-btn.active{color:var(--accent);font-weight:800;}
  .nav-btn .ic{font-size:18px;}

  .view{display:none;}
  .view.active{display:block;}

  .theme-toggle{display:flex;gap:6px;}
  .theme-dot{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;}
  .theme-dot.boy{background:linear-gradient(135deg,#3aa0ff,#7cd6c4);}
  .theme-dot.girl{background:linear-gradient(135deg,#ef7cb1,#c99bef);}
  .theme-dot.selected{border-color:var(--ink);}

  .backup-row{display:flex;gap:8px;}
  .backup-row button{flex:1;border:none;border-radius:12px;padding:10px;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:var(--shadow);font-family:var(--font-body);}
  .btn-export{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
  .btn-import{background:var(--bg1);color:var(--ink);}
  input[type=file]{display:none;}
  .hint{font-size:11px;color:var(--sub);margin-top:8px;line-height:1.8;}
  .celebrate{position:fixed;inset:0;background:rgba(20,30,40,.55);display:flex;align-items:center;justify-content:center;z-index:60;}
  .celebrate .box{background:#fff;border-radius:22px;padding:24px;text-align:center;max-width:300px;}
  .celebrate .box .em{font-size:48px;}
  .celebrate button{margin-top:14px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;padding:10px 20px;border-radius:12px;font-weight:700;font-family:var(--font-body);}
  .field-label{font-size:11px;color:var(--sub);font-weight:700;margin-bottom:6px;display:block;}

  /* menu grid (more view) */
  .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .menu-tile{background:var(--bg1);border:none;border-radius:16px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:12px;color:var(--ink);text-decoration:none;}
  .menu-tile .mi{font-size:22px;}
  .menu-tile:active{transform:scale(.96);}
  .back-btn{border:none;background:var(--bg1);border-radius:10px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;margin-bottom:10px;font-family:var(--font-body);}

  /* profile cards */
  .profile-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:var(--bg1);margin-bottom:10px;}
  .profile-card img,.profile-card .ph-e{width:48px;height:48px;border-radius:14px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:16px;flex:0 0 auto;}
  .profile-card .pinfo{flex:1;min-width:0;}
  .profile-card .pinfo b{font-size:13px;display:block;}
  .profile-card .pinfo small{color:var(--sub);font-size:10.5px;}
  .profile-card .pactions{display:flex;gap:4px;flex-wrap:wrap;}
  .pbtn{border:none;background:#fff;border-radius:8px;padding:5px 7px;font-size:14px;cursor:pointer;box-shadow:var(--shadow);}

  /* modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(15,25,35,.55);display:flex;align-items:flex-end;justify-content:center;z-index:70;}
  @media (min-width:701px){.modal-overlay{align-items:center;}}
  /* sub-pickers that can open on top of another already-open modal (date picker, icon picker) need to stack above it */
  #jalaliDateModal, #timePickerModal, #taskEmojiModal{z-index:80;}
  .modal-box{background:#fff;width:100%;max-width:420px;border-radius:24px 24px 0 0;padding:20px;max-height:85vh;overflow-y:auto;}
  @media (min-width:701px){.modal-box{border-radius:24px;}}
  .modal-box h3{font-family:var(--font-display);font-size:18px;margin:0 0 14px;}
  .modal-box label{display:block;font-size:11.5px;color:var(--sub);font-weight:700;margin:10px 0 5px;}
  .modal-box input[type=text], .modal-box input[type=date], .modal-box input[type=number]{width:100%;border:1.5px solid #e5edf2;border-radius:12px;padding:10px;font-size:14px;font-family:var(--font-body);}
  .emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px;max-height:180px;overflow-y:auto;}
  .emoji-pick{border:2px solid transparent;background:var(--bg1);border-radius:10px;padding:8px 0;font-size:18px;cursor:pointer;}
  .emoji-pick.selected{border-color:var(--accent);background:#fff;}
  .mission-emoji-btn{width:52px;height:52px;font-size:26px;text-align:center;border:2px solid var(--accent);background:var(--bg1);border-radius:12px;cursor:pointer;padding:0;}
  .mission-emoji-btn:hover{background:#fff;}
  .modal-photo-row{display:flex;align-items:center;gap:10px;margin-top:8px;}
  .modal-photo-row img,.modal-photo-row .ph-e{width:56px;height:56px;border-radius:16px;object-fit:cover;background:var(--bg1);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:20px;}
  .modal-btn-row{display:flex;gap:8px;margin-top:18px;}
  .modal-btn-row button{flex:1;border:none;border-radius:12px;padding:11px;font-weight:800;font-size:13px;cursor:pointer;font-family:var(--font-body);}
  .btn-save{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
  .btn-danger{background:linear-gradient(135deg,var(--bad),#ff9a94);color:#fff;}
  .confirm-box{text-align:center;}
  .confirm-icon{font-size:40px;margin-bottom:6px;}
  .confirm-box h3{margin-bottom:6px;}
  .confirm-msg{font-size:12.5px;color:var(--sub);line-height:1.8;margin:0 0 4px;}
  .btn-cancel{background:var(--bg1);color:var(--ink);}

  /* status bar: level / points / streak */
  .status-bar{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px;}
  .status-level{display:flex;align-items:center;gap:10px;}
  .status-badge{font-size:24px;flex:0 0 auto;}
  .status-level-txt{flex:1;min-width:0;}
  .status-level-txt b{font-size:12.5px;display:block;margin-bottom:3px;}
  .status-level-txt small{color:var(--sub);font-size:10.5px;}
  .level-bar{height:7px;background:var(--bg1);border-radius:5px;overflow:hidden;margin:3px 0;}
  .level-fill{height:100%;background:linear-gradient(90deg,var(--accent3),var(--accent));transition:width .4s;}
  .status-chip{background:var(--bg1);border-radius:10px;padding:6px 10px;font-size:11.5px;font-weight:800;display:flex;align-items:center;gap:4px;flex:0 0 auto;}

  /* shop */
  .shop-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--bg1);margin-bottom:10px;}
  .shop-card .se{font-size:22px;flex:0 0 auto;}
  .shop-card .st{flex:1;min-width:0;font-size:12.5px;font-weight:700;}
  .shop-card .sc{font-size:11px;color:var(--sub);}
  .shop-buy{border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:10px;padding:7px 12px;font-weight:800;font-size:12px;cursor:pointer;font-family:var(--font-body);}
  .shop-buy:disabled{background:#dbe2e8;color:#9aa7b2;cursor:not-allowed;}
  .redeemed-row{display:flex;align-items:center;gap:8px;padding:6px 0;}
  .redeemed-row .rd-info{flex:1;font-size:11.5px;color:var(--sub);}

  /* games */
  .game-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px;}
  .gc-top{display:flex;align-items:center;gap:12px;}
  .gc-ic{font-size:30px;flex:0 0 auto;width:52px;height:52px;border-radius:16px;background:var(--bg1);
    display:flex;align-items:center;justify-content:center;}
  .gc-txt h3{margin:0 0 3px;font-size:14.5px;font-weight:800;color:var(--ink);font-family:var(--font-body);}
  .gc-txt p{margin:0;font-size:11.5px;color:var(--sub);line-height:1.6;}
  .gc-best{font-size:11.5px;color:var(--sub);margin:10px 0;padding-inline-start:2px;}
  .gc-play{width:100%;border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
    border-radius:12px;padding:11px;font-weight:800;font-size:13px;cursor:pointer;font-family:var(--font-body);}

  /* shared full-screen game overlay */
  .game-overlay{position:fixed;inset:0;background:var(--bg1);z-index:200;display:flex;flex-direction:column;}
  .game-overlay-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:16px;background:var(--card);box-shadow:0 4px 14px rgba(20,60,90,.08);flex:0 0 auto;}
  .game-back{border:none;background:var(--bg1);color:var(--ink);font-weight:700;font-size:12.5px;
    padding:8px 14px;border-radius:10px;cursor:pointer;font-family:var(--font-body);}
  .game-title{font-weight:800;font-size:14.5px;color:var(--ink);}
  .game-stat{font-weight:800;font-size:13.5px;color:var(--accent);min-width:70px;text-align:left;}
  .game-area{flex:1;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;align-items:center;}

  /* memory match */
  .memgame-grid{display:grid;margin:0 auto;}
  .mem-cell{border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;user-select:none;
    box-shadow:0 6px 14px rgba(20,60,90,.12);transition:transform .15s ease;}
  .mem-cell.flipped,.mem-cell.matched{background:#fff;box-shadow:inset 0 0 0 2px var(--bg1);}
  .mem-cell.matched{background:linear-gradient(135deg,var(--good),#7cd6c4);color:#fff;cursor:default;}
  .mem-cell:active{transform:scale(.94);}
  .game-done-box{text-align:center;margin-top:26px;}
  .game-done-box .em{font-size:44px;margin-bottom:10px;}
  .game-done-box h3{margin:0 0 6px;font-size:16px;color:var(--ink);}
  .game-done-box p{margin:0 0 18px;font-size:13px;color:var(--sub);}
  .game-done-box .new-best{color:var(--good);font-weight:800;}
  .game-again-btn{border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
    border-radius:12px;padding:11px 26px;font-weight:800;font-size:13px;cursor:pointer;font-family:var(--font-body);}

  /* quick math */
  .qm-question{font-size:34px;font-weight:800;color:var(--ink);margin:30px 0 26px;text-align:center;font-family:var(--font-display);
    direction:ltr;unicode-bidi:isolate;}
  .qm-answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:360px;}
  .qm-answer{border:none;background:var(--card);box-shadow:var(--shadow);border-radius:14px;padding:18px;
    font-size:20px;font-weight:800;color:var(--ink);cursor:pointer;font-family:var(--font-body);transition:transform .1s ease;}
  .qm-answer:active{transform:scale(.95);}
  .qm-answer.correct{background:linear-gradient(135deg,var(--good),#7cd6c4);color:#fff;}
  .qm-answer.wrong{background:linear-gradient(135deg,var(--bad),#ff9a8a);color:#fff;}
  .qm-progress{width:100%;max-width:360px;height:8px;border-radius:5px;background:var(--bg1);overflow:hidden;margin-bottom:6px;}
  .qm-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:5px;transition:width 1s linear;}

  /* jigsaw puzzle: setup screen */
  .puzzle-setup{width:100%;max-width:460px;margin:0 auto;}
  .puzzle-section-title{font-size:13px;font-weight:800;color:var(--ink);margin:18px 0 10px;}
  .puzzle-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .puzzle-thumb{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;cursor:pointer;
    border:3px solid transparent;box-shadow:0 6px 14px rgba(20,60,90,.12);background:#fff;}
  .puzzle-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .puzzle-thumb.selected{border-color:var(--accent);}
  .puzzle-thumb.selected::after{content:"✓";position:absolute;top:6px;left:6px;background:var(--accent);color:#fff;
    width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
  .puzzle-upload-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:var(--bg1);color:var(--sub);font-size:11px;font-weight:700;border:2px dashed #bcd8ec;}
  .puzzle-upload-tile .up-ic{font-size:22px;}
  .puzzle-diff-row{display:flex;flex-wrap:wrap;gap:8px;}
  .puzzle-diff-chip{border:none;background:var(--bg1);color:var(--ink);font-weight:800;font-size:12.5px;
    padding:10px 16px;border-radius:12px;cursor:pointer;font-family:var(--font-body);}
  .puzzle-diff-chip.selected{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
  .puzzle-setup-best{font-size:11.5px;color:var(--sub);margin-top:14px;text-align:center;}
  .puzzle-start-btn{width:100%;border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
    border-radius:14px;padding:13px;font-weight:800;font-size:14px;cursor:pointer;font-family:var(--font-body);
    margin-top:18px;}
  .puzzle-start-btn:disabled{opacity:.5;cursor:not-allowed;}

  /* jigsaw puzzle: play screen */
  .puzzle-toolbar{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;}
  .puzzle-tool-btn{border:none;background:var(--card);box-shadow:var(--shadow);color:var(--ink);font-weight:700;
    font-size:11.5px;padding:8px 14px;border-radius:10px;cursor:pointer;font-family:var(--font-body);}
  .puzzle-board-wrap{position:relative;margin:0 auto;background:var(--card);border-radius:18px;box-shadow:var(--shadow);
    overflow:visible;touch-action:none;}
  .puzzle-silhouette{position:absolute;inset:0;opacity:.16;pointer-events:none;}
  .puzzle-silhouette img{width:100%;height:100%;object-fit:contain;}
  .puzzle-piece{position:absolute;cursor:grab;touch-action:none;filter:drop-shadow(0 4px 8px rgba(20,60,90,.28));
    transition:filter .15s ease;}
  .puzzle-piece:active{cursor:grabbing;}
  .puzzle-piece.placed{filter:drop-shadow(0 1px 2px rgba(20,60,90,.12));}
  .puzzle-piece.dragging{filter:drop-shadow(0 10px 18px rgba(20,60,90,.35));z-index:50;}
  .puzzle-tray{position:relative;width:100%;margin-top:16px;border-top:2px dashed #dfeaf4;padding-top:12px;}

  /* pattern memory game ("دنبال‌کن") */
  .simon-wrap{display:flex;flex-direction:column;align-items:center;width:100%;}
  .simon-status{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:16px;min-height:20px;text-align:center;}
  .simon-grid{display:grid;grid-template-columns:1fr 1fr;margin:0 auto;}
  .simon-btn{border:none;cursor:pointer;transition:filter .12s ease, transform .12s ease;filter:brightness(.82);}
  .simon-btn:active{transform:scale(.97);}
  .simon-btn.lit{filter:brightness(1.18) saturate(1.3);transform:scale(1.03);}
  .simon-btn.tl{border-radius:20px 4px 4px 4px;background:#f0665e;}
  .simon-btn.tr{border-radius:4px 20px 4px 4px;background:#ffd166;}
  .simon-btn.bl{border-radius:4px 4px 4px 20px;background:#3aa0ff;}
  .simon-btn.br{border-radius:4px 4px 20px 4px;background:#3fb984;}
  .simon-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    background:var(--card);border-radius:50%;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;
    font-weight:800;color:var(--ink);pointer-events:none;}
  .simon-start-btn{border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
    border-radius:14px;padding:13px 28px;font-weight:800;font-size:14px;cursor:pointer;font-family:var(--font-body);margin-top:20px;}

  /* missions */
  .mission-card{margin-bottom:14px;}
  .mission-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;}
  .mission-head h3{margin:0 0 4px;font-size:15px;font-weight:800;color:var(--ink);font-family:var(--font-body);}
  .mission-head .mdates{font-size:11px;color:var(--sub);}
  .mission-reward{font-size:12px;color:var(--sub);background:var(--bg1);display:inline-flex;align-items:center;gap:5px;
    padding:5px 10px;border-radius:10px;margin-top:4px;}
  .mission-menu-btn{border:none;background:var(--bg1);width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:14px;flex:0 0 auto;}
  .mission-body{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
  .mission-ring-wrap{position:relative;width:112px;height:112px;flex:0 0 auto;}
  .mission-ring-wrap svg{transform:rotate(-90deg);}
  .mission-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .mission-ring-center b{font-size:19px;color:var(--ink);font-family:var(--font-display);font-weight:400;}
  .mission-ring-center span{font-size:10px;color:var(--sub);margin-top:1px;}
  .mission-actions{display:flex;flex-direction:column;gap:8px;flex:1;min-width:140px;}
  .mission-act-btn{border:none;border-radius:12px;padding:10px 14px;font-weight:800;font-size:12.5px;cursor:pointer;font-family:var(--font-body);}
  .mission-act-good{background:linear-gradient(135deg,var(--good),#7cd6c4);color:#fff;}
  .mission-act-bad{background:linear-gradient(135deg,var(--bad),#ff9a8a);color:#fff;}
  .mission-finish-btn{border:none;background:var(--bg1);color:var(--accent);border-radius:12px;padding:8px 14px;
    font-weight:800;font-size:11.5px;cursor:pointer;font-family:var(--font-body);}
  .mission-log{margin-top:14px;border-top:1px solid #eef2f5;padding-top:10px;max-height:130px;overflow-y:auto;}
  .mission-log-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11.5px;color:var(--sub);}
  .mission-log-row .mlr-delta{font-weight:800;flex:0 0 auto;}
  .mission-log-row .mlr-delta.pos{color:var(--good);}
  .mission-log-row .mlr-delta.neg{color:var(--bad);}
  .mission-log-row .mlr-note{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mission-log-row .mlr-del{border:none;background:none;color:#c7d2da;cursor:pointer;font-size:13px;flex:0 0 auto;}
  .mission-history-item{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:10px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .mission-history-item .mh-badge{font-size:20px;flex:0 0 auto;}
  .mission-history-item .mh-info{flex:1;min-width:0;}
  .mission-history-item .mh-info b{display:block;font-size:13px;color:var(--ink);}
  .mission-history-item .mh-info span{font-size:11px;color:var(--sub);}
  .mission-section-title{font-size:13px;font-weight:800;color:var(--ink);margin:20px 0 10px;}
  .mission-empty{font-size:12.5px;color:var(--sub);text-align:center;padding:18px 0;}

  /* confetti celebration */
  .confetti-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:220;}
  .confetti-piece{position:absolute;top:-24px;border-radius:2px;animation-name:confettiFall;animation-timing-function:cubic-bezier(.3,0,.7,1);animation-fill-mode:forwards;}
  @keyframes confettiFall{
    0%{transform:translateY(0) rotate(0deg);opacity:1;}
    100%{transform:translateY(var(--fall-dist,640px)) rotate(var(--spin,540deg));opacity:0;}
  }

  /* memories gallery */
  .memory-form{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
  .memory-form input[type=text]{border:none;background:var(--bg1);border-radius:10px;padding:9px;font-size:12.5px;font-family:var(--font-body);}
  .memory-photo-btn{border:1.5px dashed var(--accent);color:var(--accent);background:none;border-radius:10px;padding:8px;font-size:12px;font-weight:700;cursor:pointer;}
  .memory-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .memory-tile{position:relative;border-radius:14px;overflow:hidden;background:var(--bg1);aspect-ratio:1;}
  .memory-tile img{width:100%;height:100%;object-fit:cover;}
  .memory-tile .mcap{position:absolute;bottom:0;right:0;left:0;background:rgba(20,30,40,.6);color:#fff;font-size:10px;padding:4px 6px;}
  .memory-tile .mdel{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:11px;cursor:pointer;}

  /* templates */
  .level-manage-link{width:100%;border:none;text-align:right;cursor:pointer;font-family:var(--font-body);margin-bottom:14px;}
  .quick-bonus-row{display:flex;gap:8px;}
  .quick-bonus-btn{flex:1;border:none;border-radius:12px;padding:11px 6px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:var(--font-body);}
  .quick-bonus-good{background:linear-gradient(135deg,var(--good),#63d3a3);color:#fff;}
  .quick-bonus-bad{background:linear-gradient(135deg,var(--bad),#ff9a94);color:#fff;}
  .bonus-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;margin-bottom:8px;}
  .bonus-row.bonus-good{background:rgba(63,185,132,.10);}
  .bonus-row.bonus-bad{background:rgba(240,102,94,.10);}
  .bonus-amt{font-weight:800;font-size:13px;flex:0 0 auto;min-width:52px;}
  .bonus-good .bonus-amt{color:var(--good);}
  .bonus-bad .bonus-amt{color:var(--bad);}
  .bonus-info{flex:1;min-width:0;}
  .bonus-info b{font-size:12px;display:block;}
  .bonus-info small{color:var(--sub);font-size:10px;}
  .level-manage-link:active{transform:scale(.99);}
  .level-row{display:flex;align-items:center;gap:8px;padding:10px;border-radius:14px;background:var(--bg1);margin-bottom:10px;flex-wrap:wrap;}
  .level-row .lv-emoji{width:44px;border:none;background:#fff;border-radius:10px;padding:8px 4px;font-size:16px;text-align:center;font-family:var(--font-body);}
  .level-row .lv-title{flex:1 1 120px;min-width:0;border:none;background:#fff;border-radius:10px;padding:8px;font-size:12.5px;font-weight:700;font-family:var(--font-body);}
  .level-row .lv-min-wrap{display:flex;align-items:center;gap:4px;flex:0 0 auto;}
  .level-row .lv-min-wrap label{font-size:10px;color:var(--sub);font-weight:700;}
  .level-row .lv-min{width:64px;border:none;background:#fff;border-radius:10px;padding:8px 4px;font-size:12.5px;font-weight:800;text-align:center;font-family:var(--font-body);}

  .template-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--bg1);margin-bottom:10px;}
  .template-card .te{font-size:22px;}
  .template-card .tt{flex:1;font-size:12.5px;font-weight:700;}
  .template-apply{border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:10px;padding:7px 12px;font-weight:800;font-size:12px;cursor:pointer;font-family:var(--font-body);}

  /* suggestions */
  .suggest-card{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #eef2f5;}
  .suggest-card:last-child{border-bottom:none;}
  .suggest-card span.se{font-size:16px;width:22px;text-align:center;}
  .suggest-card .st{flex:1;font-size:12.5px;font-weight:600;}
  .suggest-add{border:none;background:var(--good);color:#fff;border-radius:8px;padding:5px 10px;font-size:11px;font-weight:800;cursor:pointer;}

  /* pin modal + lock button */
  .pin-dots{display:flex;justify-content:center;gap:12px;margin:16px 0;}
  .pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--accent);}
  .pin-dot.filled{background:var(--accent);}
  .pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .pin-key{border:none;background:var(--bg1);border-radius:14px;padding:14px;font-size:18px;font-weight:800;cursor:pointer;font-family:var(--font-body);}
  .pin-key:active{transform:scale(.95);}
  .switch-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eef2f5;}
  .switch-row:last-child{border-bottom:none;}
  .switch-row .stxt{font-size:12.5px;font-weight:700;flex:1;}
  .switch-row .ssub{font-size:10.5px;color:var(--sub);font-weight:500;display:block;margin-top:2px;}
  .kp-switch{position:relative;width:42px;height:24px;border-radius:14px;background:#dbe2e8;border:none;cursor:pointer;flex:0 0 auto;}
  .kp-switch::after{content:"";position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;}
  .kp-switch.on{background:linear-gradient(135deg,var(--accent),var(--accent2));}
  .kp-switch.on::after{transform:translateX(-18px);}

  /* child mode: hide editing affordances */
  body.kp-child-mode .parent-only{display:none !important;}
  body.kp-child-mode .lockable{
    pointer-events:none !important;
    opacity:.55;
    -webkit-user-select:none; user-select:none;
  }
  body.kp-child-mode .lockable:not(.circle):not(.goal-check){
    background:#eef1f3 !important;
  }
  .lock-btn{border:none;background:var(--card);width:38px;height:38px;border-radius:12px;box-shadow:var(--shadow);
    display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;}

  .jdp-row{display:flex;gap:8px;margin:16px 0;}
  .jdp-select{flex:1;border:1.5px solid #e5edf2;border-radius:12px;padding:10px 4px;font-size:13px;font-family:var(--font-body);background:#fff;text-align:center;}
  .date-picker-btn{width:100%;border:1.5px solid #e5edf2;border-radius:12px;padding:10px;font-size:13px;font-family:var(--font-body);background:#fff;text-align:center;cursor:pointer;font-weight:700;color:var(--ink);}

  .guide-section{margin-bottom:16px;}
  .guide-section h3{font-size:13.5px;margin:0 0 6px;display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:800;}
  .guide-section p{font-size:12.5px;color:var(--sub);line-height:1.9;margin:0;}

  /* small update toast */
  .kp-toast{
    position:absolute;top:14px;left:50%;transform:translateX(-50%) translateY(-14px);
    background:var(--ink);color:#fff;padding:10px 16px;border-radius:14px;
    display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
    box-shadow:0 12px 30px rgba(0,0,0,.28);opacity:0;transition:opacity .3s, transform .3s;
    z-index:100;max-width:88%;pointer-events:none;
  }
  .kp-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .kp-toast-ic{font-size:15px;}

  /* ======================================================================
     DESKTOP EXPERIENCE — نسخه اختصاصی کامپیوتر
     From 1024px up we drop the phone-mockup entirely: a fixed navigation
     rail on the reading-start (right) side, a wide two-column profile
     header, and a fluid card canvas that reflows itself per view. Nothing
     below this point touches phone/tablet layout — it only ever activates
     inside this single media query.
     ====================================================================== */
  @media (min-width:1024px){
    :root{ --rail-w:242px; --canvas-max:1180px; }

    body{
      display:block;padding:0;
      background:
        radial-gradient(1100px 580px at 88% -10%, rgba(58,160,255,.14), transparent 60%),
        radial-gradient(900px 520px at -10% 108%, rgba(124,214,196,.16), transparent 55%),
        linear-gradient(160deg,var(--bg1),var(--bg2) 65%);
    }
    [data-theme="girl"] body{
      background:
        radial-gradient(1100px 580px at 88% -10%, rgba(239,124,177,.14), transparent 60%),
        radial-gradient(900px 520px at -10% 108%, rgba(201,155,239,.16), transparent 55%),
        linear-gradient(160deg,var(--bg1),var(--bg2) 65%);
    }

    .phone-shell{
      position:fixed;inset:0;width:auto;height:auto;max-height:none;
      border-radius:0;box-shadow:none;background:transparent;
      flex-direction:row-reverse;
    }
    .phone-shell::before{display:none;}

    /* ---------------- navigation rail ---------------- */
    .bottom-nav{
      flex:0 0 var(--rail-w);width:var(--rail-w);height:100%;
      background:linear-gradient(190deg,#182741,#0d1520 75%);
      box-shadow:2px 0 30px rgba(10,20,35,.20);
      border-radius:0;padding:30px 14px;gap:4px;
      flex-direction:column;align-items:stretch;justify-content:flex-start;
    }
    .rail-brand{display:flex;align-items:center;gap:10px;padding:2px 10px;margin-bottom:30px;}
    .rail-logo{width:36px;height:36px;border-radius:11px;flex:0 0 auto;
      background:radial-gradient(circle at 32% 28%,#8fd6ff,var(--accent) 55%,#235fb8 100%);
      box-shadow:inset 0 2px 4px rgba(255,255,255,.6), inset 0 -6px 10px rgba(0,20,60,.22);
      display:flex;align-items:center;justify-content:center;}
    .rail-name{font-family:var(--font-display);color:#fff;font-size:17px;letter-spacing:.4px;}

    .nav-btn{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;color:#8fa3b9;
      padding:12px 14px;border-radius:13px;font-size:13.5px;font-weight:700;transition:background .15s,color .15s;}
    .nav-btn .ic{font-size:18px;}
    .nav-btn:hover{background:rgba(255,255,255,.07);color:#fff;}
    .nav-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;
      box-shadow:0 10px 22px rgba(58,160,255,.35);}

    /* ---------------- main canvas ---------------- */
    /* .app is now just the full-width/height scroll container touching the
       true window edge — this is what fixes the scrollbar appearing to
       "float" in the centering margin on wide screens (RTL puts a
       scrolling element's own scrollbar on ITS left edge; if that element
       also carried the max-width+auto-margin centering, the scrollbar
       landed in empty gutter space instead of the window edge). The
       centering + grid layout now live on .app-canvas, a plain child. */
    .app{flex:1;overflow-y:auto;padding:0;max-width:none;margin:0;}
    .app-canvas{
      display:grid;grid-template-columns:1.5fr 1fr;column-gap:22px;row-gap:22px;
      max-width:var(--canvas-max);margin:0 auto;padding:42px 46px 60px;
      grid-template-areas:
        "topbar topbar"
        "childstrip childstrip"
        "hero status"
        "season season"
        "views views";
      align-content:start;
    }
    .app::-webkit-scrollbar{width:9px;}
    .app::-webkit-scrollbar-thumb{background:rgba(20,60,90,.18);border-radius:8px;}
    .app::-webkit-scrollbar-track{background:transparent;}

    .topbar{grid-area:topbar;margin-bottom:0;justify-content:flex-start;gap:22px;}
    .topbar .icon-btn{display:none;}
    .brand h1{font-size:25px;}
    .brand span{font-size:11.5px;}
    .child-strip{grid-area:childstrip;padding-bottom:6px;margin-bottom:0;}
    .child-avatar,.child-add{width:56px;height:56px;}

    .hero{grid-area:hero;margin-bottom:0;padding:24px;}
    .photo-wrap,.photo-wrap img,.photo-wrap .ph-empty{width:96px;height:96px;}
    .hero-txt input.name-input{font-size:23px;}
    .hero-txt textarea.slogan-input{font-size:13.5px;}

    .status-bar{grid-area:status;margin-bottom:0;justify-content:center;padding:22px;}
    .status-level-txt b{font-size:14px;}
    .status-badge{font-size:30px;}

    .season-row-wrap{grid-area:season;margin-top:0;}
    .season-row{margin-bottom:0;padding-bottom:2px;}
    .season-btn{padding:12px 6px;font-size:13px;}

    .view{grid-area:views;}
    .view.active{
      display:flex;flex-wrap:wrap;align-items:stretch;align-content:flex-start;gap:20px;margin-top:0;
    }
    .view.active > *{flex:1 1 380px;}
    .view.active > .behavior-tabs,
    .view.active > .hint{flex:1 1 100%;margin-bottom:0;}
    .view.active > .card,
    .view.active > .go-shop-btn,
    .view.active > .game-card,
    .view.active > button.level-manage-link{margin-bottom:0;}

    .card{padding:19px 21px;display:flex;flex-direction:column;}
    .card h2{font-size:16.5px;}

    .card, .go-shop-btn, .game-card, button.level-manage-link{
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .view.active > .card:hover,
    .view.active > .go-shop-btn:hover,
    .view.active > .game-card:hover,
    .view.active > button.level-manage-link:hover{
      transform:translateY(-4px);
      box-shadow:0 20px 44px rgba(20,60,90,.18);
    }

    /* menu-grid + notify/pin/backup cards: let short cards stretch and
       center their content so they never leave a dead gap below */
    #view-more #moreMenu{justify-content:flex-start;}
    #view-more .card:not(#moreMenu){justify-content:center;}
    .menu-grid{flex:1;align-content:start;}

    #view-guide .card{column-count:2;column-gap:32px;}
    #view-guide .guide-section{break-inside:avoid;margin-bottom:20px;}


    /* schedule view: suggestion card on top, full-width daily schedule below */
    #view-schedule.view.active > *{flex:1 1 100%;}
    #view-schedule > .card:first-child{order:2;}
    #view-schedule > .card.parent-only{order:1;}

    /* behavior view: both good/bad boxes side by side at a glance,
       tab switcher no longer needed, shop button spans full width below,
       and the level card is matched in height to the quick-bonus card */
    #view-behavior .behavior-tabs{display:none;}
    #view-behavior #goodPane,
    #view-behavior #badPane{display:block !important;}
    #view-behavior.view.active{align-items:stretch;}
    #view-behavior.view.active > #goodPane,
    #view-behavior.view.active > #badPane{flex:1 1 460px;}
    #view-behavior.view.active > #goShopBtn{flex:1 1 100%;}
    #view-behavior.view.active > #levelManageCard,
    #view-behavior.view.active > #quickBonusCard{flex:1 1 380px;align-self:stretch;}
    #levelManageCard{display:flex;flex-direction:column;justify-content:center;}

    .menu-grid{grid-template-columns:repeat(3,1fr);}

    .modal-box{max-width:470px;padding:26px;}

    /* ---------------- refined scrollbars ---------------- */
    *{scrollbar-width:thin;scrollbar-color:rgba(58,160,255,.45) transparent;}
    .app{scrollbar-color:rgba(58,160,255,.5) transparent;}
    .bottom-nav{scrollbar-color:rgba(255,255,255,.25) transparent;}
    ::-webkit-scrollbar{width:9px;height:9px;}
    ::-webkit-scrollbar-track{background:transparent;}
    ::-webkit-scrollbar-thumb{
      background:linear-gradient(180deg,var(--accent),var(--accent2));
      border-radius:9px;border:2px solid transparent;background-clip:padding-box;
    }
    ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--accent),#2f8fe0);background-clip:padding-box;}
    .bottom-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);background-clip:padding-box;}
    .emoji-grid::-webkit-scrollbar,
    .modal-box::-webkit-scrollbar{width:7px;}
  }