/*
 * ADevolution Kids — Premium UI System 2026
 * Primitive -> semantic -> component tokens.
 * Loaded last: visual-only modernization, existing behavior preserved.
 */

/* ---------- 1. Primitive tokens ---------- */
:root{
  --p-violet-50:#f8f5ff;
  --p-violet-100:#f0eafd;
  --p-violet-200:#e3d8f8;
  --p-violet-300:#cdbcf0;
  --p-violet-500:#8467c8;
  --p-violet-600:#6f52b4;
  --p-violet-700:#574092;
  --p-mint-50:#f2fbf7;
  --p-mint-100:#dff5ea;
  --p-mint-500:#36a77d;
  --p-mint-700:#21765a;
  --p-sky-50:#f3f9fe;
  --p-sky-100:#dfeffc;
  --p-sky-500:#4d9bd7;
  --p-sky-700:#286c9f;
  --p-yellow-50:#fffaf0;
  --p-yellow-100:#fff0c9;
  --p-yellow-500:#d99722;
  --p-orange-500:#ef783f;
  --p-orange-600:#d95f28;
  --p-rose-100:#fbe4ef;
  --p-rose-500:#d76398;
  --p-red-500:#cf4b55;
  --p-ink-950:#211a36;
  --p-ink-800:#352c4e;
  --p-ink-600:#655d78;
  --p-ink-500:#7f778f;
  --p-ink-400:#9c95aa;
  --p-white:#ffffff;
  --p-offwhite:#fbfaf7;
  --p-line:#ebe6f1;

  --p-space-1:4px;
  --p-space-2:8px;
  --p-space-3:12px;
  --p-space-4:16px;
  --p-space-5:20px;
  --p-space-6:24px;
  --p-space-8:32px;
  --p-space-10:40px;
  --p-space-12:48px;

  --p-radius-sm:12px;
  --p-radius-md:16px;
  --p-radius-lg:20px;
  --p-radius-xl:24px;
  --p-radius-2xl:28px;
  --p-radius-full:999px;

  --p-shadow-1:0 1px 2px rgba(45,33,73,.04),0 4px 12px rgba(45,33,73,.05);
  --p-shadow-2:0 2px 5px rgba(45,33,73,.05),0 10px 26px rgba(45,33,73,.08);
  --p-shadow-3:0 8px 30px rgba(66,48,109,.14);

  --p-duration-fast:140ms;
  --p-duration-normal:220ms;
  --p-duration-slow:320ms;
  --p-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- 2. Semantic tokens ---------- */
:root{
  --ui-bg:var(--p-offwhite);
  --ui-surface:var(--p-white);
  --ui-surface-soft:var(--p-violet-50);
  --ui-text:var(--p-ink-950);
  --ui-text-secondary:var(--p-ink-600);
  --ui-text-muted:var(--p-ink-500);
  --ui-border:var(--p-line);
  --ui-primary:var(--p-violet-600);
  --ui-primary-hover:var(--p-violet-700);
  --ui-primary-soft:var(--p-violet-100);
  --ui-secondary:var(--p-mint-500);
  --ui-secondary-soft:var(--p-mint-100);
  --ui-info:var(--p-sky-500);
  --ui-info-soft:var(--p-sky-100);
  --ui-warning:var(--p-yellow-500);
  --ui-warning-soft:var(--p-yellow-100);
  --ui-important:var(--p-orange-500);
  --ui-danger:var(--p-red-500);
  --ui-focus:rgba(111,82,180,.38);
  --ui-scrim:rgba(28,21,45,.50);
  --ui-page-gutter:var(--p-space-4);
  --ui-section-gap:var(--p-space-6);
  --ui-control-min:48px;
}

/* ---------- 3. Component tokens ---------- */
:root{
  --card-bg:var(--ui-surface);
  --card-border:var(--ui-border);
  --card-radius:var(--p-radius-xl);
  --card-padding:var(--p-space-4);
  --card-shadow:var(--p-shadow-1);
  --button-bg:var(--ui-primary);
  --button-bg-hover:var(--ui-primary-hover);
  --button-fg:var(--p-white);
  --button-radius:var(--p-radius-full);
  --button-height:var(--ui-control-min);
  --input-bg:var(--p-white);
  --input-border:var(--ui-border);
  --input-radius:var(--p-radius-md);
  --nav-bg:rgba(255,255,255,.96);
  --nav-active-bg:var(--ui-primary-soft);
}

/* ---------- Foundation ---------- */
html{font-size:16px;background:var(--ui-bg);color-scheme:light}
html,body,#app{min-height:100%;overscroll-behavior:none}
body{
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  color:var(--ui-text);background:var(--ui-bg);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
body::before{background:var(--ui-bg)!important}
#app{
  width:100%;max-width:520px;height:100dvh;background:var(--ui-bg);
  border-inline:1px solid rgba(74,56,112,.05);overflow:hidden
}
.screen{background:var(--ui-bg);animation:uiScreenIn var(--p-duration-normal) var(--p-ease)}
.screen.active{isolation:isolate}
.scroll{scrollbar-width:none;overscroll-behavior-y:contain}
.scroll::-webkit-scrollbar,.ref-scroll::-webkit-scrollbar{display:none}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit}
button,[onclick]{-webkit-tap-highlight-color:transparent}
button:focus-visible,[onclick]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ui-focus)!important;outline-offset:2px!important
}
button:disabled,[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none!important}

/* Structural Material icons. Pictogram content remains visual content, not UI chrome. */
.ni-icon,.ad-menu-icon,.tlogo::before,.tbtn::before,.ad-menu-trigger::before,.qa-emoji::before,
.psi::before,.fab::before{
  font-family:"Material Symbols Rounded";font-weight:500;font-style:normal;
  font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24;
  line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap
}

/* App bars */
.screen:not(#screen-welcome):not(#screen-calm)>.topbar{
  min-height:72px;padding:10px var(--ui-page-gutter);
  background:rgba(255,255,255,.92)!important;border-bottom:1px solid var(--ui-border)!important;
  backdrop-filter:blur(18px);box-shadow:none!important;gap:var(--p-space-2)
}
.tbrand{min-width:0;gap:var(--p-space-3)}
.tbrand-txt{min-width:0}
.ttitle{font-size:1.18rem!important;line-height:1.2;font-weight:900!important;color:var(--ui-text)!important}
.tsub{font-size:.78rem!important;line-height:1.35;color:var(--ui-text-secondary)!important;font-weight:700!important}
.tlogo{
  width:46px!important;height:46px!important;border-radius:15px!important;
  display:grid!important;place-items:center!important;background:var(--ui-primary-soft)!important;
  color:var(--ui-primary)!important;box-shadow:none!important;font-size:0!important
}
.tlogo::before{font-size:25px}
#screen-planning .tlogo::before{content:"calendar_month"}
#screen-picto .tlogo::before{content:"imagesmode"}
#screen-print .tlogo::before{content:"print"}
#screen-ressources .tlogo::before{content:"menu_book"}
#screen-activities .tlogo::before{content:"target"}
#screen-paiement .tlogo::before{content:"workspace_premium"}
#screen-settings .tlogo::before{content:"settings"}
#screen-calm .tlogo::before{content:"self_improvement"}
.tbtn-g{gap:var(--p-space-2)}
.tbtn,.sound-toggle,.ref-icon-btn,.ref-back{
  width:46px!important;height:46px!important;min-width:46px!important;border-radius:15px!important;
  border:0!important;background:var(--ui-primary-soft)!important;color:var(--ui-primary)!important;
  display:grid!important;place-items:center!important;box-shadow:none!important;
  transition:background var(--p-duration-fast),transform var(--p-duration-fast)
}
.tbtn:active,.sound-toggle:active,.ref-icon-btn:active,.ref-back:active{transform:scale(.94)}
.tbtn{font-size:0!important}
.tbtn::before{content:"help";font-size:23px}
.tbtn-notifications::before{content:"notifications_none"!important;font-size:24px!important}
#screen-planning .tbtn-g .tbtn:nth-child(1)::before{content:"dashboard_customize"}
#screen-planning .tbtn-g .tbtn:nth-child(3)::before{content:"restart_alt"}
#screen-planning .tbtn-g .tbtn:nth-child(4)::before{display:none}
#screen-picto .tbtn.aq::before{content:"add"}
.ad-menu-trigger{font-size:0!important;background:var(--ui-primary-soft)!important}
.ad-menu-trigger::before{content:"menu";font-size:26px}

/* Content rhythm */
.screen:not(#screen-calm)>.scroll{
  padding:var(--p-space-4) var(--ui-page-gutter) calc(96px + env(safe-area-inset-bottom,0px))!important;
  background:
    radial-gradient(circle at 95% 4%,rgba(223,239,252,.5),transparent 25%),
    linear-gradient(180deg,var(--p-violet-50),var(--ui-bg) 230px)!important
}
.sec{
  margin:var(--p-space-6) 0 var(--p-space-3)!important;font-size:1rem!important;
  font-weight:900!important;letter-spacing:-.01em;color:var(--ui-text)!important
}

/* Cards */
.slot-card,.pcrd,.print-card,.res-card,.act-lib-card,.pay-card,.plan-card,.set-item,
.modal,.modal-box,.uauth-box,.conf-box,.tip,.prog-wrap,.board-banner,.ref-preview,.ref-pricebar{
  background:var(--card-bg)!important;border:1px solid var(--card-border)!important;
  border-radius:var(--card-radius)!important;box-shadow:var(--card-shadow)!important
}
.slot-card,.pcrd,.print-card,.res-card,.act-lib-card,.set-item{
  transition:transform var(--p-duration-fast) var(--p-ease),box-shadow var(--p-duration-normal)
}
.slot-card:active,.pcrd:active,.print-card:active,.res-card:active,.act-lib-card:active,.set-item:active{
  transform:scale(.985);box-shadow:none!important
}

/* Welcome */
#screen-welcome{
  background:
    radial-gradient(circle at -8% -2%,var(--p-violet-200) 0 25%,transparent 25.5%),
    radial-gradient(circle at 112% 102%,var(--p-violet-100) 0 27%,transparent 27.5%),
    radial-gradient(circle at 88% 20%,rgba(223,239,252,.7),transparent 22%),
    linear-gradient(160deg,#fff,var(--p-violet-50) 68%,#f7f2ff)
}
.welcome-logo{filter:drop-shadow(0 10px 24px rgba(79,56,132,.10))}
.welcome-tagline{font-size:1.12rem!important;line-height:1.55!important}
.welcome-language{
  width:min(360px,100%);margin-top:var(--p-space-5);padding:var(--p-space-3);
  border:1px solid rgba(183,164,224,.45);border-radius:var(--p-radius-lg);
  background:rgba(255,255,255,.72);box-shadow:var(--p-shadow-1);
  backdrop-filter:blur(14px)
}
.welcome-language-title{
  margin-bottom:var(--p-space-2);color:var(--ui-text-secondary);
  font-size:.78rem;font-weight:900;letter-spacing:.03em
}
.welcome-language-options{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--p-space-2)}
.welcome-language-btn{
  min-height:48px;padding:7px 6px;border:1.5px solid var(--ui-border);
  border-radius:14px;background:var(--ui-surface);color:var(--ui-text-secondary);
  font:800 .76rem/1.2 Nunito,sans-serif;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease
}
.welcome-language-btn span{
  display:block;margin-bottom:2px;color:var(--ui-text-muted);font-size:.63rem;letter-spacing:.08em
}
.welcome-language-btn.active{
  border-color:var(--ui-primary);background:var(--ui-primary-soft);color:var(--ui-primary);
  box-shadow:inset 0 0 0 1px var(--ui-primary)
}
.welcome-language-btn.active span{color:var(--ui-primary)}
.welcome-language-btn:focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
.welcome-actions{padding-inline:var(--p-space-6)!important}
.welcome-primary{
  min-height:56px!important;background:linear-gradient(135deg,var(--ui-primary),var(--p-violet-700))!important;
  border-radius:var(--button-radius)!important;box-shadow:0 10px 24px rgba(111,82,180,.25)!important
}
.welcome-login{min-height:48px!important}
[dir="rtl"] .welcome-primary [aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}

/* Home */
#screen-home .topbar{grid-template-columns:48px 1fr 48px!important}
#screen-home .tbrand .tlogo{background:transparent!important;width:auto!important}
#screen-home .tbrand .tlogo::before{display:none}
#screen-home .tbrand .tlogo img{width:142px!important;height:48px!important}
#screen-home .hero-card{
  padding:var(--p-space-5)!important;border:1px solid var(--p-violet-200)!important;
  border-radius:var(--p-radius-2xl)!important;background:
    radial-gradient(circle at 96% 0,rgba(255,255,255,.65),transparent 33%),
    linear-gradient(135deg,#f2eafd,#e8ddf7)!important;
  box-shadow:var(--p-shadow-2)!important
}
#screen-home .hero-name{font-size:1.5rem!important;letter-spacing:-.02em}
#screen-home .hero-stats{gap:var(--p-space-2)!important;margin-top:var(--p-space-4)!important}
#screen-home .hstat{
  min-height:72px;padding:10px 6px!important;background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(255,255,255,.95)!important;border-radius:var(--p-radius-md)!important
}
.week-row{gap:var(--p-space-2)!important}
.wday{
  min-width:0;min-height:76px;border-radius:var(--p-radius-md)!important;border:1px solid var(--ui-border)!important;
  box-shadow:var(--p-shadow-1)!important
}
.wday.today{background:linear-gradient(160deg,var(--ui-primary),var(--p-violet-700))!important}
.qa-grid{gap:var(--p-space-3)!important}
.qa{
  position:relative;min-height:118px!important;padding:var(--p-space-4)!important;
  border:1px solid rgba(255,255,255,.9)!important;border-radius:var(--p-radius-xl)!important;
  box-shadow:var(--p-shadow-1)!important;overflow:hidden
}
.qa::after{content:"arrow_forward";font-family:"Material Symbols Rounded";position:absolute;right:12px;bottom:12px;color:currentColor;opacity:.55;font-size:19px}
.qa-emoji{font-size:0!important;width:42px!important;height:42px!important;border-radius:14px!important}
.qa-emoji::before{font-size:24px;color:var(--ui-primary)}
.qa:nth-child(1) .qa-emoji::before{content:"calendar_month"}
.qa:nth-child(2) .qa-emoji::before{content:"imagesmode";color:var(--p-mint-700)}
.qa:nth-child(3) .qa-emoji::before{content:"print";color:var(--p-yellow-500)}
.qa:nth-child(4) .qa-emoji::before{content:"workspace_premium";color:var(--p-orange-600)}
.qa:nth-child(5) .qa-emoji::before{content:"forum";color:var(--p-sky-700)}
#proBanner2026{
  background:linear-gradient(125deg,var(--p-violet-600),var(--p-rose-500))!important;
  border-radius:var(--p-radius-xl)!important;box-shadow:var(--p-shadow-2)!important
}

/* Filters, search, progress */
.dsel,.ptabs{gap:var(--p-space-2)!important;padding:var(--p-space-3) var(--ui-page-gutter) var(--p-space-2)!important}
.dc,.ptab{
  min-height:44px!important;padding:9px 16px!important;border:1px solid var(--ui-border)!important;
  border-radius:var(--p-radius-full)!important;background:var(--ui-surface)!important;
  color:var(--ui-text-secondary)!important;box-shadow:none!important
}
.dc.active,.ptab.active{
  color:#fff!important;background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;
  box-shadow:0 5px 14px rgba(111,82,180,.20)!important
}
.prog-wrap{margin:var(--p-space-2) var(--ui-page-gutter) 0!important;padding:var(--p-space-4)!important}
.prog-track{height:7px!important;background:var(--p-violet-100)!important}
.prog-fill{background:linear-gradient(90deg,var(--ui-primary),var(--p-rose-500))!important}
.psearch{margin:var(--p-space-2) var(--ui-page-gutter) 0!important}
.psearch input{
  height:52px!important;padding-left:48px!important;background:var(--input-bg)!important;
  border:1px solid var(--input-border)!important;border-radius:var(--input-radius)!important;
  font-size:1rem!important;box-shadow:none!important
}
.psi{font-size:0!important}.psi::before{content:"search";font-size:23px;color:var(--ui-text-muted)}

/* Planning */
#screen-planning .scroll{padding-top:var(--p-space-3)!important}
.slot{gap:var(--p-space-2)!important}
.slot-card{padding:var(--p-space-4)!important}
.slot-time{font-variant-numeric:tabular-nums;color:var(--ui-text-secondary)!important}
.slot-title{font-size:.94rem!important;color:var(--ui-text)!important}
.slot-desc{color:var(--ui-text-secondary)!important}
.sc-btns{gap:var(--p-space-2)!important}
.sc-btn,.pcrd-act,.picto-sound-btn{
  min-width:42px!important;min-height:42px!important;border-radius:13px!important;box-shadow:none!important
}
#screen-planning .sc-btns .sc-btn{font-size:0!important}
#screen-planning .sc-btns .sc-btn::before,.picto-sound-btn::before{
  font-family:"Material Symbols Rounded";font-size:21px;font-weight:500;line-height:1
}
#screen-planning .sc-btns .sc-btn:nth-child(1)::before{content:"task_alt"}
#screen-planning .sc-btns .sc-btn:nth-child(2)::before{content:"volume_up"}
#screen-planning .sc-btns .sc-btn:nth-child(3)::before{content:"edit"}
#screen-planning .sc-btns .sc-btn:nth-child(4)::before{content:"content_copy"}
#screen-planning .sc-btns .sc-btn:nth-child(5)::before{content:"delete"}
#screen-planning .sc-btns .sc-btn:nth-child(6)::before{content:"event"}
.picto-sound-btn{font-size:0!important}.picto-sound-btn::before{content:"volume_up"}
.fab{
  width:58px!important;height:58px!important;border-radius:20px!important;font-size:0!important;
  right:var(--p-space-4)!important;background:linear-gradient(135deg,var(--ui-important),var(--p-orange-600))!important;
  box-shadow:0 10px 24px rgba(217,95,40,.26)!important
}
.fab::before{content:"add";font-size:30px;color:#fff}

/* Pictograms */
.board-banner{
  padding:var(--p-space-4)!important;background:linear-gradient(135deg,var(--p-sky-100),#f5fbff)!important;
  border-color:#d8e9f6!important
}
.bb-txt{color:var(--p-sky-700)!important;font-size:.96rem!important}
.bb-btn,.add-picto-cta,.btn-pri,.print-btn,.pay-btn,.ref-cta{
  min-height:48px!important;border-radius:var(--button-radius)!important;font-weight:900!important
}
.bb-btn{background:var(--p-sky-700)!important;color:#fff!important}
.pgrid{gap:var(--p-space-3)!important}
.pcrd{padding:var(--p-space-3) var(--p-space-2)!important}
.picto-img-zone{border-radius:var(--p-radius-md)!important;background:var(--p-violet-50)!important}

/* Activities, print, settings, resources */
.act-lib-card{padding:var(--p-space-4)!important}
.act-lib-img{border-radius:var(--p-radius-md)!important}
.print-section,.set-sec,.res-section{margin-bottom:var(--p-space-6)!important}
.print-section button,.set-sec button{min-height:44px!important}
.print-sec-title,.set-title,.res-title{
  color:var(--ui-text-secondary)!important;font-size:.78rem!important;letter-spacing:.08em!important
}
.set-item{min-height:72px!important;padding:var(--p-space-3) var(--p-space-4)!important}
.set-ico{width:46px!important;height:46px!important;border-radius:15px!important}
.notification-setting{
  width:100%;font:inherit;text-align:start;color:inherit;
  appearance:none;-webkit-appearance:none
}
.notification-setting .set-name,.notification-setting .set-sub{display:block}
.set-ico-notification{
  background:var(--ui-primary-soft)!important;color:var(--ui-primary)!important
}
.set-ico-notification::before{
  content:"notifications_none";font-family:"Material Symbols Rounded";
  font-size:24px;font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24
}
.settings-switch{
  width:52px;height:32px;padding:3px;flex:0 0 52px;border-radius:999px;
  display:flex;align-items:center;background:#c9c5d5;transition:background .2s ease
}
.settings-switch span{
  width:26px;height:26px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(33,17,54,.2);transition:transform .2s ease
}
.settings-switch.is-on{background:var(--ui-primary)}
.settings-switch.is-on span{transform:translateX(20px)}
[dir="rtl"] .settings-switch.is-on span{transform:translateX(-20px)}
.notification-setting:focus-visible{
  outline:3px solid var(--ui-focus)!important;outline-offset:2px
}

/* Communication board: bright, calm, high-contrast premium workspace */
.board-ov{
  background:
    radial-gradient(circle at 90% 8%,rgba(223,239,252,.78),transparent 27%),
    radial-gradient(circle at 8% 92%,rgba(227,216,248,.72),transparent 30%),
    var(--ui-bg)!important
}
.board-stars{opacity:.16!important}
.board-header{
  padding:calc(var(--p-space-3) + env(safe-area-inset-top,0px)) var(--p-space-4) var(--p-space-3)!important;
  background:rgba(255,255,255,.92)!important;backdrop-filter:blur(18px);
  border-bottom:1px solid var(--ui-border)!important
}
.board-close,.blang,.board-action{
  min-width:44px!important;min-height:44px!important;border-radius:13px!important
}
.board-close{
  background:var(--ui-primary-soft)!important;color:var(--ui-primary)!important;
  border:1px solid var(--p-violet-200)!important
}
.blang{
  background:var(--ui-surface)!important;color:var(--ui-text-secondary)!important;
  border:1px solid var(--ui-border)!important
}
.blang.active{
  background:var(--ui-primary)!important;color:#fff!important;border-color:var(--ui-primary)!important
}
.board-title{color:var(--ui-text)!important}.board-subtitle{color:var(--ui-text-secondary)!important}
.sb-inner{
  border-radius:var(--p-radius-lg)!important;padding:var(--p-space-3)!important;
  background:rgba(255,255,255,.94)!important;border:1px solid var(--ui-border)!important;
  box-shadow:var(--p-shadow-1)!important
}
.sb-label{color:var(--ui-text-muted)!important}
.sb-subject{color:var(--ui-primary)!important;background:var(--ui-primary-soft)!important;border-color:var(--p-violet-200)!important}
.sb-plus{color:var(--ui-text-muted)!important}
.sb-verb-sel{
  color:var(--p-mint-700)!important;background:var(--p-mint-100)!important;
  border-color:#bfe8d5!important
}
.sb-verb-sel option{background:#fff!important;color:var(--ui-text)!important}
.sb-verb-arr{color:var(--p-mint-700)!important}
.sb-obj{color:#8b651d!important;background:var(--p-yellow-50)!important;border-color:#e7c980!important}
.sb-phrase-row{background:var(--p-violet-50)!important;border-color:var(--p-violet-100)!important}
.sb-phrase-txt{color:var(--ui-text)!important}.sb-phrase-hint{color:var(--ui-text-muted)!important}
.sb-say{background:linear-gradient(135deg,var(--ui-primary),var(--p-mint-500))!important}
.sb-clear{background:#fff0ed!important;color:var(--p-orange-600)!important;border-color:#f5c9bb!important}
.bcat{
  background:var(--ui-surface)!important;color:var(--ui-text-secondary)!important;
  border:1px solid var(--ui-border)!important
}
.bcat.active{color:#fff!important;border-color:transparent!important}
.board-grid{gap:var(--p-space-3)!important}
.bcrd{
  border-radius:var(--p-radius-lg)!important;padding:var(--p-space-3) var(--p-space-2)!important;
  background:rgba(255,255,255,.95)!important;border:1px solid var(--ui-border)!important;
  box-shadow:var(--p-shadow-1)!important;backdrop-filter:none!important
}
.bcrd.selected{
  border-color:var(--ui-primary)!important;background:var(--ui-primary-soft)!important;
  box-shadow:0 0 0 3px var(--ui-focus)!important
}
.bcrd-img{border-radius:var(--p-radius-md)!important}
.bcrd-lbl{color:var(--ui-text)!important}.bcrd-sub{color:var(--ui-text-secondary)!important}
.bcrd-en{color:var(--ui-text-muted)!important}
.board-sound-btn{
  background:var(--p-yellow-100)!important;color:#805d14!important;border-color:#efd99e!important
}
.bhist-title{color:var(--ui-text-muted)!important}
.bhist-pill{background:#fff!important;color:var(--ui-text-secondary)!important;border-color:var(--ui-border)!important}

/* Dialogs and forms */
.modal-ov{background:var(--ui-scrim)!important;backdrop-filter:blur(8px)!important}
.modal-sheet{
  border-radius:var(--p-radius-2xl) var(--p-radius-2xl) 0 0!important;
  background:var(--ui-surface)!important;border-top:1px solid var(--ui-border)!important;
  box-shadow:0 -16px 44px rgba(26,20,43,.18)!important
}
.modal-handle{background:var(--p-line)!important}
.field label,.uauth-label{color:var(--ui-text)!important;font-weight:800!important}
.field input,.field select,.field textarea,.uauth-input,.sub-email-input{
  min-height:50px!important;background:var(--input-bg)!important;color:var(--ui-text)!important;
  border:1px solid var(--input-border)!important;border-radius:var(--input-radius)!important;
  box-shadow:none!important
}
.field input:focus,.field select:focus,.field textarea:focus,.uauth-input:focus,.sub-email-input:focus{
  border-color:var(--ui-primary)!important;box-shadow:0 0 0 4px var(--ui-focus)!important
}
.btn-pri,.uauth-btn,.pay-btn{
  min-height:52px!important;background:var(--button-bg)!important;color:var(--button-fg)!important;
  border-radius:var(--button-radius)!important;box-shadow:0 7px 18px rgba(111,82,180,.20)!important
}
.btn-pri:active,.uauth-btn:active,.pay-btn:active{transform:scale(.98)!important}
#google-signin-wrap,#google-signin-btn{
  width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important
}
#google-signin-btn{display:flex!important;align-items:center!important;justify-content:center!important}
#google-signin-btn>div,#google-signin-btn iframe{max-width:100%!important}

/* Bottom navigation */
.bnav{
  display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:2px!important;
  min-height:72px;padding:6px var(--p-space-2) calc(7px + env(safe-area-inset-bottom,0px))!important;
  background:var(--nav-bg)!important;border-top:1px solid var(--ui-border)!important;
  box-shadow:0 -8px 24px rgba(45,33,73,.06)!important;backdrop-filter:blur(20px)
}
.ni{
  min-height:58px!important;border-radius:var(--p-radius-md)!important;
  color:var(--ui-text-muted)!important;transition:background var(--p-duration-fast),color var(--p-duration-fast)!important
}
.ni-icon{font-size:0!important}
.ni-icon::before{font-size:25px}
#nav-home .ni-icon::before{content:"home"}
#nav-planning .ni-icon::before{content:"calendar_month"}
#nav-picto .ni-icon::before{content:"imagesmode"}
#nav-activities .ni-icon::before{content:"target"}
#nav-print .ni-icon::before{content:"print"}
#nav-calm .ni-icon::before{content:"self_improvement"}
#nav-settings .ni-icon::before{content:"settings"}
#nav-calm{display:flex!important}
#nav-settings{display:none!important}
#nav-calm .ni-lbl{font-size:.60rem!important}
.ni-lbl{font-size:.68rem!important;font-weight:800!important;color:inherit!important}
.ni.active{background:var(--nav-active-bg)!important;color:var(--ui-primary)!important}
.ni.active::after{display:none!important}
.ni.active .ni-icon{font-variation-settings:"FILL" 1,"wght" 600,"GRAD" 0,"opsz" 24}

/* Drawer */
.ad-menu-overlay{background:var(--ui-scrim)!important;backdrop-filter:blur(5px)!important}
.ad-menu-panel{
  padding:calc(var(--p-space-5) + env(safe-area-inset-top,0px)) var(--p-space-4) var(--p-space-6)!important;
  background:var(--ui-bg)!important;border-radius:0 var(--p-radius-2xl) var(--p-radius-2xl) 0!important
}
.ad-menu-head img{width:150px!important}
.ad-menu-close{width:46px!important;height:46px!important;border-radius:15px!important;background:var(--ui-surface)!important}
.ad-menu-item{min-height:56px!important;border-radius:var(--p-radius-md)!important}
.ad-menu-icon{font-size:0!important;background:var(--ui-surface)!important;color:var(--ui-primary)!important}
.ad-menu-icon::before{font-size:23px}
.ad-menu-item:nth-child(1) .ad-menu-icon::before{content:"home"}
.ad-menu-item:nth-child(2) .ad-menu-icon::before{content:"menu_book"}
.ad-menu-item:nth-child(3) .ad-menu-icon::before{content:"settings"}
.ad-menu-item:nth-child(4) .ad-menu-icon::before{content:"mail"}
.ad-menu-item:nth-child(5) .ad-menu-icon::before{content:"logout"}
.ad-menu-pro{border-radius:var(--p-radius-xl)!important;background:linear-gradient(135deg,var(--ui-primary),var(--p-rose-500))!important}

/* Assistant: compact, useful, no content obstruction */
#guide-wrap{
  display:none!important;right:var(--p-space-4)!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;
  gap:var(--p-space-2)!important
}
#screen-home.active~#guide-wrap{display:flex!important}
.guide-svg-wrap{
  width:58px!important;height:58px!important;padding:5px;border-radius:20px!important;
  display:grid;place-items:center;background:linear-gradient(145deg,var(--p-violet-500),var(--p-violet-700))!important;
  box-shadow:var(--p-shadow-3)!important;filter:none!important;overflow:hidden
}
.guide-svg-wrap svg{width:48px!important;height:54px!important;transform:translateY(5px)}
.guide-bubble{
  max-width:230px!important;padding:var(--p-space-3) var(--p-space-4)!important;
  border:1px solid var(--ui-border)!important;border-radius:var(--p-radius-lg) var(--p-radius-lg) 4px var(--p-radius-lg)!important;
  background:var(--ui-surface)!important;color:var(--ui-text)!important;box-shadow:var(--p-shadow-2)!important
}

/* Reference overview screens */
.ref-appbar{
  min-height:72px!important;padding:calc(8px + env(safe-area-inset-top,0px)) var(--p-space-4) 8px!important;
  border-bottom:1px solid var(--ui-border)!important
}
.ref-appbar h1{font-size:1.15rem!important;color:var(--ui-text)!important}
.ref-hero{min-height:205px!important;padding:var(--p-space-8) var(--p-space-6)!important}
.ref-hero.plan{background:linear-gradient(135deg,var(--p-violet-100),var(--p-violet-200))!important}
.ref-hero.picto{background:linear-gradient(135deg,var(--p-mint-100),#eefaf3)!important}
.ref-hero.picto h2,.ref-hero.picto p{max-width:195px}
.picto-hero-stack{
  width:138px!important;height:118px!important;right:14px!important;top:28px!important;
  display:block!important;background:transparent!important;border-radius:0!important;
  box-shadow:none!important;transform:none!important
}
.picto-hero-card{
  position:absolute;display:grid;place-items:center;width:62px;height:62px;
  border:1px solid rgba(255,255,255,.92);border-radius:18px;background:#fff;
  box-shadow:0 10px 22px rgba(31,89,69,.14);font-size:2.15rem;line-height:1
}
.picto-hero-school{left:2px;top:42px;transform:rotate(-9deg);font-size:1.9rem}
.picto-hero-smile{right:4px;top:0;transform:rotate(8deg)}
.picto-hero-car{right:0;bottom:0;transform:rotate(6deg);font-size:2rem}
.picto-hero-apple{
  left:30px;top:18px;z-index:3;width:70px;height:70px;border-radius:20px;
  transform:rotate(-3deg);font-size:2.55rem;box-shadow:0 13px 26px rgba(31,89,69,.2)
}
@media(max-width:390px){
  .ref-hero.picto h2,.ref-hero.picto p{max-width:178px}
  .picto-hero-stack{right:8px!important;transform:scale(.9)!important;transform-origin:right top!important}
}
.ref-hero.activity{background:linear-gradient(135deg,#fde7ef,#f7dce9)!important;color:#6f2d51!important}
.ref-hero.printinfo{background:linear-gradient(135deg,var(--p-yellow-100),#fff8e8)!important;color:#684812!important}
html[lang="ar"] .ref-hero h2,
html[lang="ar"] .ref-hero p{
  max-width:62%!important;
  margin-left:auto!important;
  margin-right:0!important;
  text-align:right
}
html[lang="ar"] .ref-hero-art{
  right:auto!important;
  left:24px!important
}
html[lang="ar"] .picto-hero-stack{
  right:auto!important;
  left:14px!important
}
@media(max-width:390px){
  html[lang="ar"] .ref-hero-art{left:16px!important}
  html[lang="ar"] .picto-hero-stack{
    left:8px!important;
    transform:scale(.9)!important;
    transform-origin:left top!important
  }
}
.ref-feature-list{padding:var(--p-space-4) var(--p-space-5)!important}
.ref-feature{padding:var(--p-space-3) 0!important}
.activity .ref-feature-ico{background:#fbe4ef!important;color:#a53d70!important}
.printinfo .ref-feature-ico{background:var(--p-yellow-100)!important;color:#8b651d!important;font-size:.86rem!important;font-weight:900}
.activity-dot{background:var(--p-rose-500)!important}
.printinfo-dot{background:var(--p-yellow-500)!important}
.activity-price{color:#a53d70!important}
.printinfo-price{color:#8b651d!important}
.activity-cta{background:linear-gradient(135deg,var(--p-rose-500),#a53d70)!important}
.printinfo-cta{background:linear-gradient(135deg,var(--p-yellow-500),#a96c10)!important}

/* Responsive */
@media(max-width:520px){
  #app{max-width:none;border:0}
  #screen-planning .sc-hdr{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--p-space-3)}
  #screen-planning .sc-btns{
    grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);
    gap:var(--p-space-2);padding-top:var(--p-space-3);border-top:1px solid var(--ui-border)
  }
  #screen-planning .sc-btn{width:100%!important;min-width:0!important}
}
@media(min-width:700px){
  :root{--ui-page-gutter:24px}
  #app{max-width:820px}
  .screen:not(#screen-calm)>.scroll{padding-inline:var(--ui-page-gutter)!important}
  .qa-grid{grid-template-columns:repeat(4,1fr)!important}
  .qa:nth-child(5){grid-column:1/-1!important}
  .pgrid{grid-template-columns:repeat(4,1fr)!important}
  .board-grid{grid-template-columns:repeat(5,1fr)!important}
}
@media(min-width:1024px){
  #app{max-width:1040px}
  .pgrid{grid-template-columns:repeat(5,1fr)!important}
  .board-grid{grid-template-columns:repeat(6,1fr)!important}
}
@media(orientation:landscape) and (max-height:520px){
  .welcome-body{padding-block:8px!important}
  .welcome-logo{width:min(210px,58%)!important}
  .welcome-actions{padding-bottom:12px!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@keyframes uiScreenIn{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:none}}