:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:dark;
  --bg:#030914;
  --panel:rgba(8,19,39,.95);
  --panel-soft:rgba(15,35,65,.78);
  --cyan:#22d9ff;
  --cyan-soft:#8aeaff;
  --text:#f7fbff;
  --muted:#94a9bd;
  --border:rgba(63,211,255,.16);
  --nav-height:76px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{
  color:var(--text);
  background:
    radial-gradient(circle at 22% 8%,rgba(0,111,255,.16),transparent 38%),
    radial-gradient(circle at 82% 92%,rgba(0,215,255,.08),transparent 35%),
    var(--bg)
}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

/* auth */
.auth-screen{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:#020814}
.auth-card{width:min(460px,100%);padding:34px;border:1px solid var(--border);border-radius:28px;background:var(--panel);box-shadow:0 28px 80px rgba(0,0,0,.55);text-align:center}
.auth-logo{width:150px;height:150px;object-fit:contain;border-radius:28px;box-shadow:0 0 38px rgba(0,199,255,.3)}
.auth-card h1{margin:22px 0 6px}
.auth-card p{margin:0 0 22px;color:var(--muted)}
.auth-card input{width:100%;padding:15px 17px;border:1px solid var(--border);border-radius:15px;outline:none;background:#050c18;color:#fff}
.primary-button{width:100%;margin-top:12px;padding:15px;border:0;border-radius:15px;font-weight:800;background:linear-gradient(135deg,#18c9ff,#5ae8ff);color:#00101a}
.auth-error{min-height:24px;margin-top:10px;color:#ff9797}

/* shell */
.app{position:relative;width:100%;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) var(--nav-height) auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(10px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 10px calc(18px + env(safe-area-inset-left));border-bottom:1px solid var(--border);background:rgba(2,8,20,.92);backdrop-filter:blur(18px)}
.brand-button{border:0;padding:0;background:transparent;color:inherit;text-align:left}
.brand{display:flex;align-items:center;gap:12px}
.brand>span,.brand-title,.brand-subtitle{display:block}
.brand-logo{width:50px;height:50px;object-fit:cover;border-radius:13px;box-shadow:0 0 18px rgba(0,208,255,.23)}
.brand-title{font-size:24px;font-weight:900;letter-spacing:.08em}
.brand-subtitle{margin-top:2px;font-size:12px;color:var(--muted)}
.user-section{display:flex;align-items:center;gap:10px;font-weight:700}
.connection-indicator{width:9px;height:9px;border-radius:50%}
.connection-indicator.online{background:#56e89c}
.connection-indicator.offline{background:#ff6f76}
.header-button{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.045);color:#fff;font-size:20px}
.view-stack{position:relative;min-height:0;overflow:hidden}
.app-view{position:absolute;inset:0;display:none;min-height:0}
.app-view.active{display:flex;flex-direction:column}

/* home */
.home-content{width:min(1050px,100%);height:100%;margin:0 auto;padding:20px;overflow-y:auto}
.hero-card{position:relative;overflow:hidden;border:1px solid rgba(43,217,255,.25);border-radius:28px;background:#020817;box-shadow:0 20px 60px rgba(0,0,0,.38)}
.hero-image{display:block;width:100%;max-height:450px;aspect-ratio:2/1;object-fit:cover;transform:scale(1) translate3d(0,0,0);transition:filter 250ms ease}
.hero-card.thinking .hero-image{animation:heroChase 1.7s ease-in-out infinite;filter:brightness(.72) saturate(1.15)}
@keyframes heroChase{
  0%{transform:scale(1.03) translate3d(-4px,0,0) rotate(-.15deg)}
  25%{transform:scale(1.045) translate3d(7px,-3px,0) rotate(.2deg)}
  50%{transform:scale(1.035) translate3d(11px,2px,0) rotate(.1deg)}
  75%{transform:scale(1.05) translate3d(-2px,4px,0) rotate(-.18deg)}
  100%{transform:scale(1.03) translate3d(-4px,0,0) rotate(-.15deg)}
}
.hero-greeting{padding:18px 22px 4px}
.hero-greeting h1{margin:0;font-size:clamp(28px,3.4vw,44px)}
.hero-greeting p{margin:5px 0 12px;color:var(--muted);font-size:18px}
.main-mic-button{width:calc(100% - 36px);margin:8px 18px 10px;display:flex;align-items:center;justify-content:center;gap:14px;padding:16px;border:1px solid rgba(58,226,255,.42);border-radius:20px;background:linear-gradient(135deg,rgba(0,163,255,.25),rgba(0,218,255,.12));color:#fff}
.main-mic-button:hover{border-color:var(--cyan)}
.main-mic-button.listening{border-color:#ff6173;background:rgba(255,68,91,.18)}
.main-mic-icon{font-size:32px}
.main-mic-button strong,.main-mic-button small{display:block;text-align:left}
.main-mic-button strong{font-size:19px}
.main-mic-button small{margin-top:3px;color:var(--muted)}
.type-button{width:calc(100% - 36px);margin:0 18px 18px;padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.035);color:var(--text);font-weight:700}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:26px 3px 12px;font-size:18px;font-weight:850}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.feature-card{display:flex;align-items:center;gap:12px;min-height:92px;padding:15px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.035);color:#fff;text-align:left}
.feature-card:hover{border-color:var(--cyan);background:rgba(34,217,255,.07)}
.feature-icon{font-size:30px}
.feature-card strong,.feature-card small{display:block}
.feature-card strong{font-size:17px}
.feature-card small{margin-top:3px;color:var(--muted)}
.recent-card{margin:20px 0 8px;padding:16px;border:1px solid var(--border);border-radius:20px;background:rgba(7,20,39,.68)}
.recent-label{margin-bottom:12px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.recent-body{display:flex;align-items:flex-start;gap:12px}
.recent-avatar{width:46px;height:46px;border-radius:13px;object-fit:cover}
.recent-text{line-height:1.45}
.text-link-button{margin-top:8px;padding:0;border:0;background:transparent;color:var(--cyan-soft);font-weight:700}

/* screens */
.screen-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border-bottom:1px solid var(--border);background:rgba(5,13,27,.76)}
.screen-header h1{margin:0;font-size:25px}
.screen-header p{margin:4px 0 0;color:var(--muted)}
.chat-header-actions{display:flex;align-items:center;gap:8px}
.count-pill{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(34,217,255,.07);color:var(--cyan-soft);font-size:13px;font-weight:800}

/* chat */
.messages{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px max(18px,calc((100vw - 920px)/2));scroll-behavior:smooth}
.message-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:17px}
.message-row.user{justify-content:flex-end}
.avatar{width:42px;height:42px;flex:0 0 42px;object-fit:cover;border-radius:12px}
.bubble{max-width:min(76%,690px);padding:14px 17px;border:1px solid rgba(255,255,255,.055);border-radius:5px 18px 18px 18px;background:#101d31;font-size:17px;line-height:1.45}
.message-row.user .bubble{border-radius:18px 5px 18px 18px;border-color:rgba(70,215,255,.2);background:linear-gradient(135deg,#0e759b,#09516f)}
.message-image-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:12px}
.message-image-grid img{width:100%;max-height:380px;object-fit:cover;border-radius:13px;cursor:pointer}
.response-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07)}
.response-action{min-height:34px;padding:6px 9px;border:1px solid transparent;border-radius:10px;background:transparent;color:#aebdd0;font-size:13px;font-weight:750}
.response-action:hover,.response-action:focus-visible{border-color:rgba(74,216,255,.28);background:rgba(34,217,255,.08);color:#effcff;outline:none}
.response-action.active{border-color:rgba(74,216,255,.36);background:rgba(34,217,255,.12);color:var(--cyan-soft)}
.response-action:disabled{opacity:.38;cursor:default}
.user-attachment-list{display:grid;gap:7px;margin-top:10px}
.user-attachment{display:flex;align-items:center;gap:9px;min-width:0;padding:7px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(0,20,35,.22)}
.user-attachment-preview{width:42px;height:42px;flex:0 0 42px;object-fit:cover;border-radius:8px}
.user-attachment-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:8px;background:rgba(255,255,255,.08);font-size:21px}
.user-attachment-details{min-width:0;display:flex;flex-direction:column}
.user-attachment-details strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}
.user-attachment-details small{margin-top:2px;color:rgba(255,255,255,.72);font-size:11px}
.composer{flex:0 0 auto;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:9px;padding:13px max(16px,calc((100vw - 920px)/2));border-top:1px solid var(--border);background:rgba(2,8,20,.95)}
.attachment-tray{grid-column:1/-1;min-width:0;overflow-x:auto;padding-bottom:2px}
.attachment-list{display:flex;gap:8px}
.attachment-chip{display:flex;align-items:center;gap:8px;min-width:180px;max-width:290px;padding:7px 8px;border:1px solid rgba(65,212,255,.2);border-radius:12px;background:#0b1b2f}
.attachment-chip-preview{width:40px;height:40px;flex:0 0 40px;object-fit:cover;border-radius:8px}
.attachment-chip-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:8px;background:rgba(255,255,255,.055);font-size:20px}
.attachment-chip-label{min-width:0;display:flex;flex:1;flex-direction:column}
.attachment-chip-label strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}
.attachment-chip-label small{margin-top:2px;color:var(--muted);font-size:10px}
.attachment-remove{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border:0;border-radius:8px;background:rgba(255,255,255,.065);color:#dcecff;font-size:20px;line-height:1}
.attachment-remove:hover{background:rgba(255,95,118,.18);color:#ffb3bf}
.attachment-input{display:none}
.composer input{min-width:0;padding:13px 15px;border:1px solid var(--border);border-radius:15px;outline:none;background:#091427;color:#fff;font-size:16px}
.composer input:focus{border-color:var(--cyan)}
.composer-button{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--border);border-radius:15px;font-size:22px}
.attachment-button{background:#13243b;color:#fff}
.mic-button{background:#13243b;color:#fff}
.mic-button.listening{background:#a32d47;border-color:#ff687c}
.send-button{background:var(--cyan);color:#00131b;font-weight:900}
.composer-button:disabled,.main-mic-button:disabled{opacity:.45}

/* controls */
.controls-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px max(18px,calc((100vw - 1050px)/2))}
.room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.room-card{min-width:0;padding:16px;border:1px solid var(--border);border-radius:21px;background:var(--panel-soft)}
.room-card-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.room-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:13px;background:rgba(34,217,255,.09);font-size:23px}
.room-name{overflow:hidden;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.room-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.room-control{padding:10px 5px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.055);color:#fff;font-size:13px;font-weight:700}
.room-control:hover{border-color:var(--cyan)}
.room-control.primary{background:rgba(27,217,255,.14)}
.loading-card{grid-column:1/-1;padding:30px;border:1px dashed var(--border);border-radius:18px;color:var(--muted);text-align:center}

/* thinking */
.thinking-overlay{position:absolute;z-index:40;top:82px;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 32px));pointer-events:none}
.thinking-card{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:14px;padding:12px;border:1px solid rgba(255,74,98,.28);border-radius:22px;background:rgba(1,7,17,.94);box-shadow:0 18px 55px rgba(0,0,0,.52),0 0 34px rgba(255,40,70,.08);backdrop-filter:blur(15px)}
.thinking-arena{position:relative;overflow:hidden;height:96px;border:1px solid rgba(34,217,255,.15);border-radius:15px;background:radial-gradient(circle at 45% 50%,rgba(20,99,170,.24),rgba(2,8,20,.98))}

.thinking-animation{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:14px;
  background:#020814;
}
  18%{left:106px;top:67px}
  36%{left:67px;top:53px}
  54%{left:137px;top:42px}
  72%{left:92px;top:13px}
  88%{left:140px;top:71px}
  100%{left:126px;top:17px}
}
  18%{left:38px;top:71px;transform:rotate(7deg)}
  36%{left:4px;top:58px;transform:rotate(-3deg)}
  54%{left:69px;top:46px;transform:rotate(4deg)}
  72%{left:24px;top:17px;transform:rotate(-5deg)}
  88%{left:72px;top:75px;transform:rotate(5deg)}
  100%{left:61px;top:21px;transform:rotate(-8deg)}
}
  18%{left:30px;top:25px;transform:rotate(7deg) scale(1.02)}
  36%{left:6px;top:22px;transform:rotate(-8deg) scale(1.04)}
  54%{left:47px;top:15px;transform:rotate(8deg) scale(1.03)}
  72%{left:24px;top:7px;transform:rotate(-5deg) scale(1.04)}
  88%{left:48px;top:27px;transform:rotate(9deg) scale(1.02)}
  100%{left:14px;top:15px;transform:rotate(-4deg) scale(1)}
}
.thinking-copy strong,.thinking-copy small{display:block}
.thinking-copy strong{font-size:18px}
.thinking-copy small{margin-top:4px;color:var(--muted)}

/* nav */
.bottom-nav{z-index:20;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:7px max(12px,calc((100vw - 720px)/2));border-top:1px solid var(--border);background:rgba(2,8,20,.96);backdrop-filter:blur(18px)}
.nav-button{min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid transparent;border-radius:15px;background:transparent;color:var(--muted);font-size:14px;font-weight:750}
.nav-button.active{border-color:rgba(34,217,255,.2);background:rgba(34,217,255,.09);color:#fff}
.nav-icon{font-size:20px}
.status-bar{min-height:24px;padding:4px max(14px,env(safe-area-inset-left)) max(4px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.025);background:#01050d;color:#66809a;font-size:11px}

/* image viewer */
.image-viewer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:35px;background:rgba(0,0,0,.92)}
.image-viewer img{max-width:94vw;max-height:90vh;object-fit:contain;border-radius:16px}
.image-viewer-close{position:absolute;top:18px;right:18px;width:48px;height:48px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:21px}

/* translator */
.translate-modal{position:fixed;inset:0;z-index:960;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.82);backdrop-filter:blur(10px)}
.translate-dialog{width:min(650px,100%);max-height:92vh;overflow-y:auto;padding:22px;border:1px solid var(--border);border-radius:24px;background:#071426;box-shadow:0 25px 80px rgba(0,0,0,.58)}
.translate-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.translate-header h2{margin:0;font-size:26px}
.translate-header p{margin:5px 0 0;color:var(--muted)}
.translate-close,.video-close{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.05);color:#fff;font-size:19px}
.translate-direction{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:22px 0;padding:14px;border:1px solid var(--border);border-radius:17px;background:rgba(255,255,255,.025)}
.translate-direction>div{display:flex;flex-direction:column;gap:4px;text-align:center}
.translate-direction small{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.translate-direction strong{font-size:17px}
.translate-flip{width:48px;height:48px;border:1px solid rgba(34,217,255,.35);border-radius:50%;background:rgba(34,217,255,.10);color:var(--cyan-soft);font-size:25px;font-weight:900}
.translate-flip:hover{border-color:var(--cyan);transform:rotate(180deg);transition:transform .25s ease}
.translate-field{display:grid;gap:8px;font-weight:800}
.translate-field textarea{width:100%;box-sizing:border-box;min-height:150px;padding:14px;border:1px solid var(--border);border-radius:15px;resize:vertical;outline:none;background:#091427;color:#fff;font:inherit;line-height:1.5}
.translate-field textarea:focus{border-color:var(--cyan)}
.translate-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:16px}
.translate-secondary-button,.translate-submit{min-height:50px;padding:12px 16px;border-radius:15px;font-weight:850}
.translate-secondary-button{border:1px solid var(--border);background:#13243b;color:#fff}
.translate-secondary-button.listening{border-color:#ff687c;background:#a32d47}
.translate-submit{border:1px solid rgba(58,226,255,.5);background:var(--cyan);color:#00131b}

/* media */
.media-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px max(18px,calc((100vw - 1080px)/2))}
.media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.media-card{display:flex;flex-direction:column;gap:14px;min-width:0;padding:20px;border:1px solid var(--border);border-radius:22px;background:var(--panel-soft)}
.media-card.youtube-card{grid-row:span 2}
.media-card-icon{font-size:36px}
.media-card h2{margin:0 0 6px;font-size:22px}
.media-card p{margin:0;color:var(--muted);line-height:1.5}
.media-search-field{display:grid;gap:7px;margin-top:auto;color:#dfeeff;font-size:13px;font-weight:800}
.media-search-field input{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid var(--border);border-radius:14px;outline:none;background:#091427;color:#fff;font:inherit}
.media-search-field input:focus{border-color:var(--cyan)}
.media-primary-button{min-height:48px;padding:12px 16px;border:1px solid rgba(34,217,255,.4);border-radius:14px;background:rgba(34,217,255,.14);color:#effcff;font-weight:850}
.media-primary-button:hover{border-color:var(--cyan);background:rgba(34,217,255,.22)}
.youtube-results{display:grid;gap:9px}
.youtube-result{display:grid;grid-template-columns:112px minmax(0,1fr);gap:11px;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(0,0,0,.18)}
.youtube-result img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:9px}
.youtube-result-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.youtube-result-copy strong{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.youtube-result-copy small{color:var(--muted)}
.youtube-watch{margin-top:auto;padding:7px 11px;border:1px solid rgba(34,217,255,.35);border-radius:10px;background:rgba(34,217,255,.12);color:#fff;font-weight:800}
.youtube-empty{padding:12px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);line-height:1.45}
.video-modal{position:fixed;inset:0;z-index:980;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.94)}
.video-dialog{position:relative;width:min(1100px,96vw,125vh)}
.video-close{position:absolute;z-index:2;top:-18px;right:-18px;background:#071426}
.video-frame-wrap{overflow:hidden;width:100%;border:1px solid var(--border);border-radius:18px;background:#000}
.video-frame-wrap iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}

/* settings and chat history */
.sheet-modal{position:fixed;inset:0;z-index:990;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.84);backdrop-filter:blur(10px)}
.sheet-dialog{width:min(680px,100%);max-height:92vh;overflow-y:auto;padding:22px;border:1px solid var(--border);border-radius:24px;background:#071426;box-shadow:0 25px 80px rgba(0,0,0,.58)}
.sheet-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.sheet-header h2{margin:0;font-size:26px}
.sheet-header p{margin:5px 0 0;color:var(--muted)}
.sheet-close{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.05);color:#fff;font-size:19px}
.settings-section{display:grid;gap:13px;padding:17px 0;border-top:1px solid var(--border)}
.settings-section:first-of-type{border-top:0}
.settings-section-copy h3{margin:0;font-size:19px}
.settings-section-copy p{margin:5px 0 0;color:var(--muted);line-height:1.45}
.settings-field{display:grid;gap:7px;color:#dfeeff;font-size:13px;font-weight:800}
.settings-field input{width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:14px;outline:none;background:#091427;color:#fff;font:inherit}
.settings-field input:focus{border-color:var(--cyan)}
.settings-button-row{display:flex;flex-wrap:wrap;gap:9px}
.settings-action{min-height:46px;padding:11px 15px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.055);color:#fff;font-weight:850}
.settings-action.primary{border-color:rgba(34,217,255,.42);background:rgba(34,217,255,.15)}
.settings-action.danger{border-color:rgba(255,102,123,.30);background:rgba(255,72,98,.09);color:#ffc0ca}
.settings-action:disabled{opacity:.45}
.settings-error{padding:10px 12px;border:1px solid rgba(255,90,110,.32);border-radius:11px;background:rgba(255,60,85,.10);color:#ffb7c1}
.legal-links{display:flex;justify-content:center;gap:8px;padding:22px 10px 4px;color:var(--muted);font-size:12px}
.legal-links a{color:var(--muted)}
.chat-history-list{display:grid;gap:9px}
.history-empty{padding:28px;border:1px dashed var(--border);border-radius:16px;color:var(--muted);text-align:center}
.history-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.035)}
.history-open{min-width:0;padding:0;border:0;background:transparent;color:#fff;text-align:left}
.history-open strong,.history-open small{display:block}
.history-open strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px}
.history-open small{margin-top:5px;color:var(--muted);font-size:12px}
.history-delete{width:38px;height:38px;border:1px solid rgba(255,102,123,.24);border-radius:11px;background:rgba(255,72,98,.07);color:#ffb4c0;font-size:17px}

/* responsive */
@media(max-width:950px){
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  :root{--nav-height:72px}
  .brand-subtitle{display:none}
  .topbar{padding-left:calc(11px + env(safe-area-inset-left));padding-right:calc(11px + env(safe-area-inset-right))}
  .brand-logo{width:44px;height:44px}
  .brand-title{font-size:22px}
  .home-content{padding:12px}
  .hero-card{border-radius:21px}
  .hero-image{aspect-ratio:2/1;object-fit:contain}
  .feature-grid,.room-grid{grid-template-columns:1fr}
  .feature-card{min-height:82px}
  .screen-header{padding:16px}
  .screen-header h1{font-size:22px}
  .screen-header p{font-size:13px}
  .messages{padding:18px 13px}
  .bubble{max-width:84%;font-size:16px}
  .composer{gap:7px;padding:11px 9px}
  .composer-button{width:48px;height:48px}
  .composer input{padding:11px 10px}
  .response-action{padding:6px 7px;font-size:12px}
  #user-name{max-width:90px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .nav-button{flex-direction:column;gap:2px;padding:5px 8px;font-size:11px}
  .nav-icon{font-size:21px}
  .thinking-overlay{top:70px;width:calc(100% - 20px)}
  .thinking-card{grid-template-columns:145px minmax(0,1fr)}
  .thinking-arena{height:88px}
  .media-grid{grid-template-columns:1fr}
  .media-card.youtube-card{grid-row:auto}
  .translate-modal{padding:9px}
  .translate-dialog{padding:16px;border-radius:19px}
  .translate-direction{gap:7px;padding:11px 7px}
  .translate-direction strong{font-size:14px}
  .translate-actions{grid-template-columns:1fr}
  .youtube-result{grid-template-columns:92px minmax(0,1fr)}
  .youtube-result img{width:92px}
  .video-modal{padding:8px}
  .video-close{top:8px;right:8px}
  .sheet-modal{align-items:end;padding:0}
  .sheet-dialog{width:100%;max-height:94vh;padding:17px;border-radius:22px 22px 0 0}
  .chat-header-actions{gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .hero-card.thinking .hero-image{animation-duration:6s}
}


/* v2.2.1 message formatting */
.message-content strong{font-weight:850;color:#fff}
.message-content em{font-style:italic;color:#dbe9f7}
.message-content code{
  padding:2px 6px;
  border:1px solid rgba(99,216,255,.14);
  border-radius:7px;
  background:rgba(0,0,0,.28);
  color:#bfefff;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:.92em
}
.message-content ul,
.message-content ol{
  margin:8px 0 8px 22px;
  padding:0
}
.message-content li{margin:4px 0}
.message-spacer{height:9px}


/* parent-home-assistant-launcher */
.ha-launch-card{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:360px;
  padding:36px;
  border:1px solid var(--border);
  border-radius:24px;
  background:var(--panel-soft);
  text-align:center
}

.ha-launch-icon{
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  margin-bottom:20px;
  border-radius:24px;
  background:rgba(34,217,255,.10);
  font-size:44px
}

.ha-launch-copy{
  max-width:560px
}

.ha-launch-copy h2{
  margin:0 0 10px;
  font-size:28px
}

.ha-launch-copy p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.55
}

.ha-launch-button{
  margin-top:26px;
  min-width:250px;
  padding:16px 24px;
  border:1px solid rgba(34,217,255,.55);
  border-radius:16px;
  background:var(--cyan);
  color:#00131b;
  font-size:16px;
  font-weight:900
}

.ha-launch-button:hover{
  transform:translateY(-1px)
}


/* =========================================================
   Otis Image Studio v2.3.0
   ========================================================= */

.image-tool-modal{
  position:fixed;
  inset:0;
  z-index:950;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);
}

.image-tool-card{
  width:min(680px,100%);
  max-height:90vh;
  overflow-y:auto;
  padding:22px;
  border:1px solid var(--border);
  border-radius:24px;
  background:#071426;
  box-shadow:0 25px 80px rgba(0,0,0,.55);
}

.image-tool-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.image-tool-header h2{
  margin:0;
  font-size:25px;
}

.image-tool-header p{
  margin:5px 0 0;
  color:var(--muted);
}

.image-tool-close{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:1px solid var(--border);
  border-radius:50%;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:19px;
}

.image-mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:20px;
  padding:5px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.image-mode-button{
  padding:11px 14px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--muted);
  font-weight:800;
}

.image-mode-button.active{
  border-color:rgba(34,217,255,.28);
  background:rgba(34,217,255,.12);
  color:#fff;
}

.image-tool-panel{
  display:grid;
  gap:16px;
}

.image-field{
  display:grid;
  gap:7px;
}

.image-field > span{
  font-weight:800;
}

.image-field small{
  color:var(--muted);
  line-height:1.4;
}

.image-field textarea,
.image-field select{
  width:100%;
  box-sizing:border-box;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#091427;
  color:#fff;
  font:inherit;
}

.image-field textarea{
  resize:vertical;
  min-height:110px;
}

.image-field textarea:focus,
.image-field select:focus{
  border-color:var(--cyan);
}

.image-field input[type="range"]{
  width:100%;
}

.image-upload-box{
  position:relative;
  display:grid;
  place-items:center;
  gap:5px;
  padding:22px;
  border:1px dashed rgba(58,226,255,.42);
  border-radius:18px;
  background:rgba(34,217,255,.055);
  text-align:center;
  cursor:pointer;
}

.image-upload-box:hover{
  border-color:var(--cyan);
  background:rgba(34,217,255,.09);
}

.image-upload-box input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.image-upload-icon{
  margin-bottom:4px;
  font-size:34px;
}

.image-upload-box small{
  color:var(--muted);
}

.image-edit-preview-wrap{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:18px;
  background:#020814;
}

.image-edit-preview{
  display:block;
  width:100%;
  max-height:360px;
  object-fit:contain;
}

.image-tool-error{
  margin-top:16px;
  padding:11px 13px;
  border:1px solid rgba(255,90,110,.32);
  border-radius:12px;
  background:rgba(255,60,85,.10);
  color:#ffb7c1;
}

.image-tool-action{
  width:100%;
  margin-top:20px;
  padding:14px 18px;
  border:1px solid rgba(58,226,255,.45);
  border-radius:16px;
  background:linear-gradient(
    135deg,
    rgba(0,163,255,.7),
    rgba(0,218,255,.55)
  );
  color:#fff;
  font-size:17px;
  font-weight:900;
}

.image-tool-action:disabled{
  opacity:.45;
}

@media(max-width:650px){
  .image-tool-modal{
    padding:10px;
  }

  .image-tool-card{
    max-height:94vh;
    padding:16px;
    border-radius:20px;
  }

  .image-tool-header h2{
    font-size:22px;
  }
}


/* Family Console v2.8.0 */
.family-console{
  display:grid;
  gap:14px;
}

/* Parent archive: long conversation text wraps without becoming markup. */
.family-archive{
  padding:16px;
  border:1px solid var(--border);
  border-radius:15px;
  background:rgba(34,217,255,.025);
}
#family-archive-block[hidden],
#family-archive-block [hidden]{display:none!important}
.family-archive h4,.family-archive h5,.family-archive p{margin:0}
.family-archive h4{font-size:15px}
.family-archive-form{display:grid;gap:12px;grid-template-columns:minmax(140px,1fr) minmax(160px,2fr) auto;align-items:end}
.family-archive-form select{width:100%;min-height:44px;padding:10px;border:1px solid var(--border);border-radius:12px;background:#091427;color:#fff;font:inherit}
.family-archive-form button{min-height:44px}
.family-archive-meta{color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
#family-archive-status{font-size:13px;line-height:1.5}
.family-archive-result{padding:10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}
.family-archive-open{display:grid;gap:5px;width:100%;min-width:0;padding:4px;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.family-archive-open strong{font-size:13px}
.family-archive-open small{color:var(--muted);font-size:11px}
.family-archive-preview{font-size:13px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.family-archive-badge{display:inline-block;margin-top:6px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.family-archive-badge.concerning{color:#ffe0a3;background:#4c361e;border:1px solid #a4752b}
.family-archive-badge.urgent{color:#ffd4dc;background:#4f2030;border:1px solid #bd4d68}
.family-archive-detail{display:grid;gap:12px;padding:14px;border:1px solid rgba(34,217,255,.3);border-radius:12px}
#family-archive-detail-body{display:grid;gap:10px;min-width:0}
.family-archive-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6}
.family-archive :is(button,select,input):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:800px){.family-archive-form{grid-template-columns:minmax(0,1fr)}}

.family-console-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:15px;
  background:rgba(34,217,255,.055);
}

.family-console-title-row strong,
.family-console-title-row small{
  display:block;
}

.family-console-title-row strong{
  font-size:17px;
}

.family-console-title-row small{
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
}

.family-console-badge{
  flex:0 0 auto;
  padding:6px 9px;
  border:1px solid rgba(34,217,255,.3);
  border-radius:999px;
  background:rgba(34,217,255,.10);
  color:#dffaff;
  font-size:11px;
  font-weight:850;
}

.family-console-counts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.family-console-metric{
  min-width:0;
  padding:12px 8px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(255,255,255,.035);
  text-align:center;
}

.family-console-metric strong,
.family-console-metric small{
  display:block;
}

.family-console-metric strong{
  font-size:21px;
  line-height:1;
}

.family-console-metric small{
  margin-top:6px;
  overflow:hidden;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.family-console-block{
  display:grid;
  gap:8px;
}

.family-console-block-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#eaf6ff;
  font-size:13px;
}

.family-console-block-title span{
  color:var(--muted);
  font-size:11px;
}

.family-console-list{
  display:grid;
  gap:7px;
}

.family-console-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.family-console-row-copy{
  min-width:0;
}

.family-console-row-copy strong,
.family-console-row-copy small{
  display:block;
}

.family-console-row-copy strong{
  overflow:hidden;
  color:#fff;
  font-size:13px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.family-console-row-copy small{
  margin-top:3px;
  overflow:hidden;
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.family-console-status{
  flex:0 0 auto;
  padding:5px 7px;
  border:1px solid rgba(80,220,150,.24);
  border-radius:999px;
  background:rgba(80,220,150,.08);
  color:#bff8d8;
  font-size:10px;
  font-weight:850;
}

.family-console-status.inactive{
  border-color:rgba(255,100,120,.24);
  background:rgba(255,80,105,.08);
  color:#ffc1ca;
}

.family-console-services{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.family-console-service{
  padding:7px 9px;
  border:1px solid rgba(34,217,255,.22);
  border-radius:999px;
  background:rgba(34,217,255,.07);
  color:#dffaff;
  font-size:10px;
  font-weight:800;
  text-transform:capitalize;
}

.family-console-service.inactive{
  border-color:var(--border);
  background:rgba(255,255,255,.025);
  color:var(--muted);
}

.family-console-empty{
  padding:11px;
  border:1px dashed var(--border);
  border-radius:11px;
  color:var(--muted);
  font-size:11px;
  text-align:center;
}

@media(max-width:650px){
  .family-console-counts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .family-console-title-row{
    align-items:flex-start;
  }
}


/* Family Console People Controls v2.8.1 */
.family-console-title-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.family-console-mini-button{
  min-height:30px;
  padding:5px 9px;
  border:1px solid rgba(34,217,255,.25);
  border-radius:9px;
  background:rgba(34,217,255,.08);
  color:#e8fbff;
  font-size:10px;
  font-weight:850;
}

.family-console-mini-button:hover{
  background:rgba(34,217,255,.14);
}

.family-console-row-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
}

.family-user-dialog{
  max-width:500px;
}

.family-user-form{
  display:grid;
  gap:15px;
}

.family-user-form .settings-field small{
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  line-height:1.4;
}

.family-user-form select{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#091427;
  color:#fff;
  font:inherit;
}

.family-user-form select:focus{
  border-color:var(--cyan);
}

.family-user-note{
  padding:10px 12px;
  border:1px solid rgba(34,217,255,.20);
  border-radius:11px;
  background:rgba(34,217,255,.06);
  color:#cbefff;
  font-size:11px;
  line-height:1.45;
}

@media(max-width:650px){
  .family-console-row{
    align-items:flex-start;
  }

  .family-console-row-actions{
    flex-direction:column;
    align-items:flex-end;
  }

  .family-console-title-actions{
    align-items:flex-end;
    flex-direction:column;
    gap:4px;
  }
}


/* Known People v2.9.9 */
.known-person-dialog{
  max-width:540px;
}

.known-person-form textarea{
  width:100%;
  min-height:110px;
  resize:vertical;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#091427;
  color:#fff;
  font:inherit;
  line-height:1.45;
}

.known-person-form textarea:focus{
  border-color:var(--cyan);
}


/* Things Otis Should Know v2.9.10 */
.family-knowledge-dialog{
  max-width:560px;
}

.family-knowledge-form textarea{
  width:100%;
  min-height:130px;
  resize:vertical;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#091427;
  color:#fff;
  font:inherit;
  line-height:1.45;
}

.family-knowledge-form textarea:focus{
  border-color:var(--cyan);
}

.family-knowledge-visibility{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.family-knowledge-visibility legend{
  padding:0 5px;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.family-knowledge-visibility label{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#e8f7ff;
  cursor:pointer;
  font-size:12px;
}

.family-knowledge-visibility input{
  width:auto;
  margin:0;
}

.family-knowledge-visibility > small{
  grid-column:1 / -1;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}

@media(max-width:650px){
  .family-knowledge-visibility{
    grid-template-columns:1fr;
  }
}


/* Family Console Device Controls v2.8.2 */
.family-device-dialog,
.family-enrollment-dialog{
  max-width:500px;
}

.family-device-details,
.family-enrollment-form{
  display:grid;
  gap:14px;
}

.family-device-detail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.family-device-detail span{
  color:var(--muted);
  font-size:11px;
  font-weight:750;
}

.family-device-detail strong{
  min-width:0;
  overflow:hidden;
  color:#fff;
  font-size:12px;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.family-enrollment-form > div{
  display:grid;
  gap:14px;
}

.family-enrollment-success{
  padding:13px;
  border:1px solid rgba(80,220,150,.25);
  border-radius:12px;
  background:rgba(80,220,150,.07);
}

.family-enrollment-success strong,
.family-enrollment-success small{
  display:block;
}

.family-enrollment-success strong{
  color:#d8ffe9;
  font-size:14px;
}

.family-enrollment-success small{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
}

#family-enrollment-token{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px;
}

@media(max-width:650px){
  .family-device-detail{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .family-device-detail strong{
    width:100%;
    text-align:left;
  }
}


/* Enrollment Login v2.8.3 */
.auth-card{
  gap:12px;
}

.auth-help{
  display:block;
  margin-top:-3px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
  text-align:left;
}

#auth-device-name{
  width:100%;
}


/* Image Edit Engine Selector v2.8.4 */
.image-edit-engine-selector{
  display:grid;
  gap:9px;
  margin-bottom:14px;
}

.image-edit-engine-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.image-edit-engine-heading strong{
  color:#fff;
  font-size:13px;
}

.image-edit-engine-heading small{
  color:var(--muted);
  font-size:10px;
}

.image-edit-engine-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

.image-edit-engine-option{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.image-edit-engine-option.active{
  border-color:rgba(34,217,255,.48);
  background:rgba(34,217,255,.12);
  box-shadow:
    inset 0 0 0 1px
    rgba(34,217,255,.08);
}

.image-edit-engine-icon{
  flex:0 0 auto;
  font-size:27px;
  line-height:1;
}

.image-edit-engine-option span:last-child{
  min-width:0;
}

.image-edit-engine-option strong,
.image-edit-engine-option small{
  display:block;
}

.image-edit-engine-option strong{
  font-size:13px;
}

.image-edit-engine-option small{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}

@media(max-width:420px){
  .image-edit-engine-options{
    grid-template-columns:1fr 1fr;
  }

  .image-edit-engine-option{
    padding:10px 8px;
    gap:7px;
  }

  .image-edit-engine-icon{
    font-size:23px;
  }
}


/* Family Console Home Controls v2.8.9 */

.family-ha-control-dialog{
  max-width:620px;
}

.family-ha-control-form{
  display:grid;
  gap:15px;
}

.family-ha-search-section{
  display:grid;
  gap:8px;
}

.family-ha-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.family-ha-search-row .settings-action{
  width:auto;
  min-width:82px;
}

.family-ha-search-results{
  display:grid;
  gap:7px;
  max-height:240px;
  overflow:auto;
  padding-right:2px;
}

.family-ha-search-result{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.family-ha-search-result-copy{
  min-width:0;
}

.family-ha-search-result-copy strong,
.family-ha-search-result-copy small{
  display:block;
}

.family-ha-search-result-copy strong{
  overflow:hidden;
  color:#fff;
  font-size:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.family-ha-search-result-copy small{
  margin-top:3px;
  overflow:hidden;
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.family-ha-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  cursor:pointer;
}

.family-ha-checkbox input{
  flex:0 0 auto;
  margin-top:2px;
}

.family-ha-checkbox span{
  min-width:0;
}

.family-ha-checkbox strong,
.family-ha-checkbox small{
  display:block;
}

.family-ha-checkbox strong{
  color:#fff;
  font-size:12px;
}

.family-ha-checkbox small{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}

@media(max-width:520px){
  .family-ha-search-row{
    grid-template-columns:1fr;
  }

  .family-ha-search-row .settings-action{
    width:100%;
  }

  .family-ha-search-result{
    align-items:flex-start;
  }
}


/* Sectioned Settings Navigation v2.9.0 */

.settings-dialog{
  width:min(980px,100%);
  max-width:980px;
}

.settings-shell{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:20px;
  min-height:520px;
}

.settings-nav{
  display:grid;
  align-content:start;
  gap:7px;
  padding-right:14px;
  border-right:1px solid var(--border);
}

.settings-nav-button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:58px;
  padding:10px 11px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:#dfeeff;
  text-align:left;
  cursor:pointer;
}

.settings-nav-button:hover{
  background:rgba(255,255,255,.035);
}

.settings-nav-button.active{
  border-color:rgba(34,217,255,.30);
  background:rgba(34,217,255,.10);
  color:#fff;
}

.settings-nav-icon{
  flex:0 0 auto;
  width:28px;
  font-size:20px;
  text-align:center;
}

.settings-nav-button > span:last-child{
  display:grid;
  min-width:0;
  gap:2px;
}

.settings-nav-button strong{
  font-size:12px;
  line-height:1.2;
}

.settings-nav-button small{
  overflow:hidden;
  color:var(--muted);
  font-size:9px;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.settings-content{
  min-width:0;
}

.settings-page{
  display:grid;
  align-content:start;
  gap:16px;
  min-width:0;
}

.settings-page-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:13px;
  border-bottom:1px solid var(--border);
}

.settings-page-heading h3{
  margin:0;
  color:#fff;
  font-size:22px;
}

.settings-page-heading p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.settings-next-card,
.settings-placeholder-card{
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.settings-next-card{
  justify-content:space-between;
}

.settings-next-card > div,
.settings-placeholder-card > div{
  min-width:0;
}

.settings-next-card strong,
.settings-next-card small,
.settings-placeholder-card strong{
  display:block;
}

.settings-next-card strong,
.settings-placeholder-card strong{
  color:#fff;
  font-size:12px;
}

.settings-next-card small{
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}

.settings-placeholder-card p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.settings-placeholder-card.compact{
  padding:12px 14px;
}

.settings-placeholder-icon{
  flex:0 0 auto;
  font-size:24px;
}

.settings-coming-soon{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid rgba(34,217,255,.28);
  border-radius:999px;
  background:rgba(34,217,255,.09);
  color:#9cecff;
  font-size:9px;
  font-weight:850;
}

.settings-page > .settings-section{
  padding:0 0 16px;
}

.settings-page > .settings-section + .settings-section{
  padding-top:16px;
}

@media(max-width:760px){
  .settings-dialog{
    width:100%;
  }

  .settings-shell{
    grid-template-columns:1fr;
    min-height:0;
  }

  .settings-nav{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:0 0 10px;
    border-right:0;
    border-bottom:1px solid var(--border);
    scrollbar-width:none;
  }

  .settings-nav::-webkit-scrollbar{
    display:none;
  }

  .settings-nav-button{
    flex:0 0 auto;
    width:auto;
    min-width:150px;
    min-height:50px;
    padding:9px 10px;
  }

  .settings-nav-button small{
    display:none;
  }

  .settings-page-heading{
    align-items:flex-start;
  }
}

@media(max-width:520px){
  .settings-page-heading{
    display:grid;
  }

  .settings-page-heading .family-console-mini-button{
    width:100%;
  }
}

/* Parental Controls v2.9.1 */

.parental-policy-notice{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid rgba(34,217,255,.22);
  border-radius:15px;
  background:rgba(34,217,255,.055);
}

.parental-policy-notice > span{
  flex:0 0 auto;
  font-size:24px;
}

.parental-policy-notice > div{
  display:grid;
  gap:3px;
}

.parental-policy-notice strong{
  color:#fff;
  font-size:12px;
}

.parental-policy-notice small{
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}

.parental-toolbar{
  display:grid;
  grid-template-columns:minmax(180px,.8fr) minmax(300px,1.2fr);
  gap:14px;
  align-items:end;
}

.parental-toolbar select,
.parental-feature-card select{
  width:100%;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:13px;
  outline:none;
  background:#091427;
  color:#fff;
  font:inherit;
}

.parental-toolbar select:focus,
.parental-feature-card select:focus{
  border-color:var(--cyan);
}

.parental-timezone-wrap{
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px;
  align-items:end;
}

.parental-controls-status{
  min-height:20px;
  color:var(--muted);
  font-size:11px;
  font-weight:750;
}

.parental-policy-panel{
  display:grid;
  gap:20px;
}

.parental-category{
  display:grid;
  gap:10px;
}

.parental-category h4{
  margin:0;
  color:#d8eaff;
  font-size:13px;
  letter-spacing:.02em;
}

.parental-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.parental-feature-card{
  display:grid;
  align-content:start;
  gap:13px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}

.parental-feature-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.parental-feature-heading > div{
  display:grid;
  min-width:0;
  gap:3px;
}

.parental-feature-heading strong{
  color:#fff;
  font-size:13px;
}

.parental-feature-heading small{
  color:var(--muted);
  font-size:9px;
}

.parental-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  color:#dfeeff;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}

.parental-toggle input{
  width:17px;
  height:17px;
  accent-color:var(--cyan);
}

.parental-safe-search{
  padding-top:3px;
}

.parental-schedule-block{
  display:grid;
  gap:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
}

.parental-anytime{
  justify-self:start;
}

.parental-schedule-times{
  display:grid;
  gap:8px;
  transition:opacity .15s ease;
}

.parental-schedule-times.inactive{
  opacity:.38;
}

.parental-time-row{
  display:grid;
  grid-template-columns:58px 1fr auto 1fr;
  gap:7px;
  align-items:center;
}

.parental-time-row > span{
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}

.parental-time-row small{
  color:var(--muted);
  font-size:9px;
}

.parental-time-row input{
  min-width:0;
  width:100%;
  padding:8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#091427;
  color:#fff;
  font:inherit;
  font-size:10px;
}

.parental-time-row input:focus{
  border-color:var(--cyan);
  outline:none;
}

.parental-time-row input:disabled{
  cursor:not-allowed;
}

@media(max-width:820px){
  .parental-feature-grid{
    grid-template-columns:1fr;
  }

  .parental-toolbar{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .parental-timezone-wrap{
    grid-template-columns:1fr;
  }

  .parental-timezone-wrap .settings-action{
    width:100%;
  }

  .parental-time-row{
    grid-template-columns:54px 1fr auto 1fr;
  }
}


/* Person Profiles v2.9.11 */
.person-profile-editor{
  display:grid;
  gap:18px;
  margin-top:5px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.person-profile-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.person-profile-heading strong{
  display:block;
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.person-profile-heading small,
.person-profile-group-title small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  line-height:1.4;
}

.person-profile-birthday,
.person-profile-group{
  display:grid;
  gap:10px;
  padding:13px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.018);
}

.person-profile-group-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.person-profile-group-title strong{
  color:#e8f7ff;
  font-size:12px;
  font-weight:850;
}

.person-profile-birthday-fields{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr)
    minmax(0,1.35fr);
  gap:9px;
}

.person-profile-list{
  display:grid;
  gap:11px;
}

.person-profile-value-row{
  display:grid;
  gap:9px;
  padding:11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(0,0,0,.12);
}

.person-profile-value-fields{
  display:grid;
  grid-template-columns:
    minmax(120px,.75fr)
    minmax(0,1.75fr);
  gap:9px;
}

.person-profile-value-row textarea{
  width:100%;
  min-height:70px;
  resize:vertical;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#091427;
  color:#fff;
  font:inherit;
  line-height:1.4;
}

.person-profile-value-row textarea:focus{
  border-color:var(--cyan);
}

.person-profile-visibility{
  margin:0;
}

.person-profile-remove{
  justify-self:end;
  min-height:30px;
  padding:5px 9px;
  border:1px solid rgba(255,120,120,.25);
  border-radius:9px;
  background:rgba(255,80,80,.07);
  color:#ffd8d8;
  font-size:10px;
  font-weight:800;
}

.person-profile-remove:hover{
  background:rgba(255,80,80,.13);
}

.family-user-dialog,
.known-person-dialog{
  max-width:700px;
}

@media(max-width:650px){
  .person-profile-birthday-fields,
  .person-profile-value-fields{
    grid-template-columns:1fr;
  }

  .person-profile-group-title{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* Help UI v2.9.13 */

.topbar-help-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:0 11px;
  border:1px solid rgba(255,103,122,.48);
  border-radius:12px;
  background:rgba(164,38,64,.24);
  color:#ffdbe0;
  font-size:13px;
  font-weight:850;
  white-space:nowrap
}

.topbar-help-button:hover{
  border-color:#ff7b8d;
  background:rgba(179,40,66,.34)
}

.topbar-help-button>span{
  font-size:17px
}

@media(max-width:650px){
  .topbar-help-button{
    min-height:38px;
    padding:0 8px;
    gap:4px
  }

  .topbar-help-button strong{
    font-size:12px
  }
}




.help-launch-button strong{font-size:18px}

.help-launch-button small{
  margin-top:2px;
  color:#ffc2ca
}



.help-modal{
  position:fixed;
  z-index:1000;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow-y:auto;
  background:rgba(0,5,15,.82);
  backdrop-filter:blur(10px)
}

.help-dialog{
  width:min(680px,100%);
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  padding:22px;
  border:1px solid rgba(255,112,132,.34);
  border-radius:25px;
  background:#071326;
  box-shadow:0 26px 90px rgba(0,0,0,.62)
}

.help-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:19px
}

.help-eyebrow{
  color:#ff9dab;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em
}

.help-header h2{
  margin:4px 0 0;
  font-size:29px
}

.help-header p{
  margin:5px 0 0;
  color:var(--muted)
}

.help-close{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:#fff
}

.help-urgency-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px
}

.help-urgency{
  display:flex;
  flex-direction:column;
  min-height:122px;
  padding:13px;
  border:1px solid var(--border);
  border-radius:17px;
  background:rgba(255,255,255,.035);
  color:#fff;
  text-align:left
}

.help-urgency>span{
  margin-bottom:6px;
  font-size:28px
}

.help-urgency strong,
.help-urgency small{display:block}

.help-urgency strong{font-size:17px}

.help-urgency small{
  margin-top:4px;
  color:var(--muted)
}

.help-urgency.active{
  border-color:rgba(255,103,122,.62);
  background:rgba(172,39,65,.2)
}

.help-routing-note{
  margin:11px 1px 15px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:#cbd8e7;
  font-size:13px
}

.help-recipient-field{
  display:grid;
  gap:7px;
  margin-bottom:17px;
  font-weight:800
}

.help-recipient{
  min-height:49px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#0b192c;
  color:#fff;
  font-size:16px
}

.help-message-section{
  display:grid;
  gap:9px
}

.help-message-section>label{
  font-weight:850
}

.help-mic{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:68px;
  padding:13px;
  border:1px solid rgba(58,226,255,.34);
  border-radius:17px;
  background:rgba(23,128,169,.13);
  color:#fff
}

.help-mic.listening{
  border-color:#ff687c;
  background:rgba(163,45,71,.25)
}

.help-mic-icon{font-size:29px}

.help-mic strong,
.help-mic small{
  display:block;
  text-align:left
}

.help-mic small{
  margin-top:3px;
  color:var(--muted)
}

.help-transcript{
  width:100%;
  min-height:108px;
  resize:vertical;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#091427;
  color:#fff;
  font:inherit;
  font-size:16px
}

.help-transcript:focus{
  border-color:var(--cyan)
}

.help-transcript-note{
  color:var(--muted);
  font-size:12px
}

.help-error,
.help-result{
  margin-top:14px;
  padding:12px 13px;
  border-radius:13px
}

.help-error{
  border:1px solid rgba(255,101,121,.35);
  background:rgba(163,45,71,.17);
  color:#ffd1d8
}

.help-result{
  border:1px solid rgba(74,216,255,.28);
  background:rgba(34,217,255,.08);
  color:#dcf8ff;
  font-weight:750
}

.help-result.acknowledged{
  border-color:rgba(86,232,156,.38);
  background:rgba(86,232,156,.1);
  color:#d8ffeb
}

.help-result.warning{
  border-color:rgba(255,195,92,.34);
  background:rgba(255,195,92,.08);
  color:#ffe9bb
}

.help-actions{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:10px;
  margin-top:17px
}

.help-cancel,
.help-send{
  min-height:52px;
  padding:11px 15px;
  border-radius:14px;
  font-size:16px;
  font-weight:850
}

.help-cancel{
  border:1px solid var(--border);
  background:rgba(255,255,255,.045);
  color:#fff
}

.help-send{
  border:1px solid rgba(255,112,132,.54);
  background:#b52e4c;
  color:#fff
}

.help-send:disabled,
.help-cancel:disabled,
.help-mic:disabled,
.help-urgency:disabled{
  opacity:.46
}

.help-emergency-note{
  margin:14px 2px 0;
  color:#9eacbd;
  font-size:11px;
  text-align:center
}

@media(max-width:650px){

  .help-modal{
    align-items:flex-end;
    padding:0
  }

  .help-dialog{
    width:100%;
    max-height:95vh;
    padding:16px;
    border-radius:23px 23px 0 0
  }

  .help-urgency-grid{
    grid-template-columns:1fr
  }

  .help-urgency{
    min-height:75px
  }

  .help-actions{
    grid-template-columns:1fr
  }
}


/* dynamic-family-branding-v2.9.14 */

.hero-artwork{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  line-height:0;
}

.hero-family-name{
  position:absolute;
  z-index:3;

  /*
   * Align with the footer text baked into the hero:
   * DaFETJax.com | house icon | FAMILY
   */
  top:75.6%;
  left:80.25%;
  right:1.4%;

  transform:translateY(-50%);

  overflow:hidden;

  color:#f4f8ff;

  font-size:clamp(9px,1.35vw,18px);
  font-weight:700;
  line-height:1.15;
  line-height:1;

  letter-spacing:0;

  white-space:nowrap;
  padding-bottom:2px;
  text-overflow:ellipsis;

  text-shadow:
    0 0 4px rgba(255,255,255,.12),
    0 0 7px rgba(26,202,255,.18);

  pointer-events:none;
}

/*
 * Keep the dynamic household name physically attached
 * to the house icon while Otis performs the thinking
 * movement.
 */
.hero-card.thinking .hero-artwork{
  animation:heroChase 1.7s ease-in-out infinite;
}

.hero-card.thinking .hero-image{
  animation:none;
}

@media(max-width:650px){
  .hero-family-name{
    top:75.9%;
    left:80.15%;
    right:.8%;
    font-size:clamp(8px,2.35vw,12px);
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-card.thinking .hero-artwork{
    animation-duration:6s;
  }
}


/* =======================================================
   Household Invitations v2.9.19
   ======================================================= */

.household-invite-dialog{
  max-width:640px;
}

.household-invite-form{
  display:grid;
  gap:15px;
}

.household-invite-form .settings-field small{
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  line-height:1.45;
}

.household-invite-form select{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#091427;
  color:#fff;
  font:inherit;
}

.household-invite-form select:focus{
  border-color:var(--cyan);
}

.household-invitation-row{
  align-items:flex-start;
}

.household-invitation-danger{
  border-color:rgba(255,102,123,.32);
  background:rgba(255,72,98,.08);
  color:#ffc0ca;
}

.household-invitation-danger:hover{
  border-color:rgba(255,102,123,.55);
  background:rgba(255,72,98,.14);
}

.household-invitation-settings-section{
  align-items:flex-start;
}

.household-invitation-settings-copy{
  min-width:0;
  flex:1;
}

.household-invitation-account-heading{
  margin-top:12px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.household-invitation-settings-copy
.family-console-list{
  margin-top:9px;
}

@media(max-width:650px){
  .household-invitation-settings-section{
    display:grid;
    gap:12px;
  }

  .household-invitation-settings-section
  > .settings-action{
    width:100%;
  }
}


/* YouTube player actions */
.youtube-player-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 18px;
  align-items:center;
  padding:14px 16px;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0 0 16px 16px;
  background:#0d192d;
}
.youtube-player-info{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.youtube-player-info small,
#youtube-player-action-status{
  color:var(--muted);
}
.youtube-player-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.youtube-player-buttons button{
  padding:10px 15px;
  border:1px solid rgba(34,217,255,.45);
  border-radius:11px;
  background:rgba(34,217,255,.15);
  color:#fff;
  font-weight:850;
}
.youtube-player-buttons button.active{
  border-color:rgba(38,214,161,.75);
  background:rgba(38,214,161,.22);
  color:#d9fff2;
}
.youtube-player-buttons button:disabled{
  opacity:.58;
}
#youtube-player-action-status{
  grid-column:1/-1;
  min-height:1.2em;
}


/* Keep YouTube actions visible on short landscape screens. */
@media(max-height:600px) and (orientation:landscape){
  .youtube-player-controls{
    padding:8px 12px;
    gap:5px 12px;
  }

  #youtube-player-action-status{
    min-height:0;
  }
}


/* OTIS media service hub */
.media-service-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.media-service-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  min-height:118px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--panel-soft);
  color:#fff;
  text-align:left;
}
.media-service-card:hover,
.media-service-card:focus-visible{
  border-color:var(--cyan);
  background:rgba(34,217,255,.10);
  transform:translateY(-1px);
}
.media-service-icon{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:17px;
  background:rgba(255,255,255,.06);
  font-size:31px;
}
.media-service-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:6px;
}
.media-service-copy strong{
  font-size:21px;
}
.media-service-copy small{
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}
.media-service-arrow{
  color:var(--cyan-soft);
  font-size:35px;
  line-height:1;
}
.youtube-service-card{
  grid-column:1/-1;
  border-color:rgba(255,75,92,.30);
}
.youtube-screen-header{
  justify-content:flex-start;
}
.youtube-back-button{
  min-height:44px;
  padding:10px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-weight:850;
}
.youtube-page-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:20px max(18px,calc((100vw - 1080px)/2));
}
.youtube-search-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:12px;
  margin-bottom:18px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--panel-soft);
}
.youtube-search-panel .media-primary-button{
  min-width:170px;
}
.youtube-page-scroll .youtube-results{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media(max-width:700px){
  .media-service-grid{
    grid-template-columns:1fr;
  }
  .youtube-service-card{
    grid-column:auto;
  }
  .media-service-card{
    min-height:100px;
    padding:16px;
  }
  .youtube-search-panel{
    grid-template-columns:1fr;
    padding:14px;
  }
  .youtube-search-panel .media-primary-button{
    width:100%;
  }
  .youtube-page-scroll .youtube-results{
    grid-template-columns:1fr;
  }
}


/* OTIS YouTube browse tabs */
.youtube-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:18px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:17px;
  background:rgba(0,0,0,.18);
}
.youtube-tab{
  min-height:46px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--muted);
  font-weight:850;
}
.youtube-tab.active{
  border-color:rgba(34,217,255,.40);
  background:rgba(34,217,255,.14);
  color:#fff;
}
.youtube-panel{
  min-width:0;
}
.youtube-panel-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:15px;
}
.youtube-panel-heading h2{
  margin:0;
  font-size:22px;
}
.youtube-panel-heading p{
  margin:5px 0 0;
  color:var(--muted);
}
.youtube-panel-heading > small{
  color:var(--cyan-soft);
  font-weight:800;
  white-space:nowrap;
}
.youtube-feed-badge{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.03em;
}
.youtube-feed-badge.educational{
  background:rgba(38,214,161,.15);
  color:#a9ffe1;
}
.youtube-feed-badge.personal{
  background:rgba(255,183,77,.14);
  color:#ffd69a;
}
.youtube-subscriptions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.youtube-subscription-card{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:86px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel-soft);
  color:#fff;
  text-align:left;
}
.youtube-subscription-card:hover,
.youtube-subscription-card:focus-visible{
  border-color:var(--cyan);
  background:rgba(34,217,255,.09);
}
.youtube-subscription-card img{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  background:rgba(255,255,255,.05);
}
.youtube-subscription-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:5px;
}
.youtube-subscription-copy strong{
  font-size:16px;
}
.youtube-subscription-copy small{
  display:-webkit-box;
  overflow:hidden;
  color:var(--muted);
  line-height:1.35;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.youtube-subscription-arrow{
  color:var(--cyan-soft);
  font-size:28px;
}
.youtube-channel-back{
  margin-bottom:13px;
  padding:9px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-weight:800;
}

@media(max-width:700px){
  .youtube-tabs{
    position:sticky;
    top:0;
    z-index:2;
    background:#071426;
  }
  .youtube-panel-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
  .youtube-panel-heading > small{
    white-space:normal;
  }
  .youtube-subscriptions{
    grid-template-columns:1fr;
  }
}


/* YouTube daily playback timer */
#youtube-player-time-status{
  grid-column:1/-1;
  min-height:1.2em;
  color:#8de8ff;
  font-weight:750;
}


/* Guardian YouTube usage */
.parental-youtube-usage{
  display:grid;
  gap:14px;
  margin:18px 0;
  padding:17px;
  border:1px solid rgba(34,217,255,.25);
  border-radius:17px;
  background:rgba(34,217,255,.055);
}
.parental-youtube-usage-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.parental-youtube-usage-heading>div{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.parental-youtube-usage-heading small,
.parental-youtube-learning-note,
#parental-youtube-usage-status{
  color:var(--muted);
}
.parental-youtube-usage-meter{
  overflow:hidden;
  height:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(0,0,0,.30);
}
.parental-youtube-usage-fill{
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    #22d9ff,
    #26d6a1
  );
  transition:width .25s ease;
}
.parental-youtube-usage-fill.limit-reached{
  background:linear-gradient(
    90deg,
    #ffb340,
    #ff557f
  );
}
.parental-youtube-usage-values{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.parental-youtube-usage-values span{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
  padding:10px;
  border-radius:12px;
  background:rgba(0,0,0,.18);
}
.parental-youtube-usage-values small{
  color:var(--muted);
}
#parental-youtube-usage-status{
  min-height:1.2em;
}
@media(max-width:620px){
  .parental-youtube-usage-heading{
    align-items:stretch;
    flex-direction:column;
  }
  .parental-youtube-usage-values{
    grid-template-columns:1fr;
  }
}


/* YouTube guardian channel rules */
.youtube-player-guardian-actions{
  grid-column:1/-1;
  display:grid;
  gap:8px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.09);
}
.youtube-player-guardian-actions>small{
  color:var(--muted);
}
.youtube-player-guardian-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.youtube-player-guardian-buttons button{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font:inherit;
  font-weight:750;
}
.youtube-player-guardian-buttons button.active{
  border-color:rgba(34,217,255,.75);
  background:rgba(34,217,255,.18);
  color:#dffbff;
}
.youtube-player-guardian-buttons button[data-youtube-classification="blocked"].active{
  border-color:rgba(255,85,127,.8);
  background:rgba(255,85,127,.18);
  color:#ffe5ec;
}
.youtube-player-guardian-buttons button:disabled{
  opacity:.55;
}
#youtube-player-guardian-status{
  min-height:1.2em;
  color:var(--muted);
}


/* YouTube pagination */
.youtube-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:18px 0 8px;
}
.youtube-pagination span{
  min-width:72px;
  color:var(--muted);
  font-size:14px;
  font-weight:800;
  text-align:center;
}
.youtube-pagination button{
  min-height:44px;
  padding:9px 16px;
  border:1px solid rgba(34,217,255,.38);
  border-radius:12px;
  background:rgba(34,217,255,.12);
  color:#fff;
  font:inherit;
  font-weight:850;
}
.youtube-pagination button:disabled{
  opacity:.42;
}
@media(max-width:640px){
  .youtube-pagination{
    position:sticky;
    bottom:8px;
    z-index:4;
    padding:8px;
    border:1px solid var(--border);
    border-radius:15px;
    background:rgba(7,20,38,.96);
  }
  .youtube-pagination button{
    flex:1;
    padding-inline:10px;
  }
}


/* Guardian YouTube subscriptions */
.parental-youtube-subscriptions{
  display:grid;
  gap:14px;
  margin:16px 0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(7,20,38,.62);
}
.parental-youtube-subscriptions-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.parental-youtube-subscriptions-heading>div{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.parental-youtube-subscriptions-heading small,
.parental-youtube-subscriptions-status{
  color:var(--muted);
}
.parental-youtube-subscription-group{
  display:grid;
  gap:9px;
  padding-top:13px;
  border-top:1px solid var(--border);
}
.parental-youtube-channel-list{
  display:grid;
  gap:8px;
}
.parental-youtube-channel-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
  background:rgba(0,0,0,.18);
}
.parental-youtube-channel-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.parental-youtube-channel-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.parental-youtube-channel-copy small{
  color:var(--muted);
}
.parental-youtube-channel-card button{
  min-height:40px;
  padding:8px 12px;
  border:1px solid rgba(34,217,255,.38);
  border-radius:11px;
  background:rgba(34,217,255,.12);
  color:#fff;
  font:inherit;
  font-weight:800;
}
.parental-youtube-channel-card button.remove{
  border-color:rgba(255,111,145,.38);
  background:rgba(255,111,145,.1);
}
.parental-youtube-channel-card button:disabled{
  opacity:.55;
}
.parental-youtube-channel-empty{
  padding:11px;
  border:1px dashed var(--border);
  border-radius:12px;
  color:var(--muted);
}
@media(max-width:640px){
  .parental-youtube-subscriptions-heading{
    align-items:stretch;
    flex-direction:column;
  }
  .parental-youtube-channel-card{
    grid-template-columns:1fr;
  }
  .parental-youtube-channel-card button{
    width:100%;
  }
}


/* YouTube Similar Videos */
.video-dialog{
  max-height:94vh;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.youtube-player-controls{
  border-radius:0;
}
.youtube-similar{
  display:grid;
  gap:12px;
  padding:16px;
  border-top:1px solid var(--border);
  border-radius:0 0 16px 16px;
  background:#091427;
}
.youtube-similar-heading>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.youtube-similar-heading strong{
  font-size:18px;
}
.youtube-similar-heading small{
  color:var(--muted);
}
.youtube-similar-results{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.youtube-similar-results .youtube-result{
  grid-template-columns:112px minmax(0,1fr);
}
@media(max-width:700px){
  .video-dialog{
    max-height:calc(100vh - 16px);
  }
  .youtube-similar{
    padding:12px;
  }
  .youtube-similar-results{
    grid-template-columns:1fr;
  }
  .youtube-similar-results .youtube-result{
    grid-template-columns:92px minmax(0,1fr);
  }
  .youtube-similar-results .youtube-result img{
    width:92px;
  }
}
@media(max-height:600px) and (orientation:landscape){
  .video-dialog{
    max-height:calc(100vh - 16px);
  }
  .youtube-similar{
    padding:10px 12px;
  }
}


/* ========================================================
   OTIS GAMES - 0.20.48
   ======================================================== */

.otis-games-view {
  padding: 0;
  overflow: hidden;
}

.otis-games-shell {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.otis-games-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 145px);
  height: calc(100dvh - 145px);
  min-height: 520px;
  flex: 1 1 auto;

  border: 0;
  background: #07111f;
}

/*
 * OTIS has six primary navigation items, including Library.
 */
.bottom-nav {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
}

.bottom-nav .nav-button {
  min-width: 0;
}

@media (max-width: 520px) {
  .bottom-nav .nav-button {
    padding-left: 4px;
    padding-right: 4px;
  }

  .bottom-nav .nav-button > span:last-child {
    font-size: 0.72rem;
  }

  .otis-games-frame {
    height: calc(100vh - 135px);
    height: calc(100dvh - 135px);
    min-height: 440px;
  }
}
/* ========================================================
   OTIS GLOBAL NATIVE NAVIGATION - 0.20.49 FIX
   ======================================================== */

.otis-native-nav {
  display: none;

  width: 100%;
  min-height: 52px;

  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 7px 12px;

  background: rgba(4, 14, 27, 0.98);
  border-bottom: 1px solid rgba(85, 185, 255, 0.24);

  flex: 0 0 auto;
  position: relative;
  z-index: 30;
}

.otis-native-nav.visible {
  display: flex;
}

.otis-native-nav-button {
  min-width: 96px;
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 7px 14px;

  border: 1px solid rgba(85, 185, 255, 0.34);
  border-radius: 14px;

  background: rgba(11, 31, 50, 0.96);
  color: #f5f9ff;

  font: inherit;
  font-weight: 750;

  cursor: pointer;
}

.otis-native-nav-button:active:not(:disabled) {
  transform: scale(0.97);
}

.otis-native-nav-button:focus-visible {
  outline: 3px solid rgba(85, 185, 255, 0.82);
  outline-offset: 2px;
}

.otis-native-nav-icon {
  font-size: 1.3rem;
  line-height: 1;
}

@media (max-width: 520px) {
  .otis-native-nav {
    gap: 6px;
    padding: 6px 8px;
  }

  .otis-native-nav-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;

    padding-left: 8px;
    padding-right: 8px;

    font-size: 0.84rem;
  }
}

/*
 * With the toolbar hidden on Home and compact elsewhere,
 * Games can use nearly the full available content area.
 */
.otis-games-frame {
  height: calc(100vh - 195px);
  height: calc(100dvh - 195px);
}

@media (max-width: 520px) {
  .otis-games-frame {
    height: calc(100vh - 185px);
    height: calc(100dvh - 185px);
  }
}
/* ========================================================
   OTIS TOPBAR NAVIGATION - 0.20.50
   ======================================================== */

.topbar-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-nav-button {
  flex: 0 0 auto;
}

.topbar-nav-button:hover,
.topbar-nav-button:focus-visible {
  border-color: rgba(34, 217, 255, .48);
  background: rgba(34, 217, 255, .10);
  outline: none;
}

.topbar-close-button:hover,
.topbar-close-button:focus-visible {
  border-color: rgba(255, 111, 118, .5);
  background: rgba(255, 111, 118, .10);
}

@media (max-width: 600px) {
  .user-section {
    gap: 6px;
  }

  .topbar-nav-actions {
    gap: 4px;
  }

  .topbar-nav-button {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 18px;
  }
}


/* ========================================================
   OTIS RESPONSIVE + IMMERSIVE UI PATCH 20260910
   ======================================================== */

/*
 * Never allow the two halves of the topbar to force the page
 * wider than the actual viewport.
 */
.topbar {
  min-width: 0;
}

.brand {
  min-width: 0;
  flex: 1 1 auto;
}

.brand > span {
  min-width: 0;
}

.user-section {
  min-width: 0;
  flex: 0 1 auto;
}

#user-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*
 * Phones: preserve useful touch targets first and remove
 * decorative/header width before allowing overflow.
 */
@media (max-width: 600px) {
  .topbar {
    gap: 8px;
    padding-left:
      calc(9px + env(safe-area-inset-left));
    padding-right:
      calc(9px + env(safe-area-inset-right));
  }

  .brand {
    gap: 8px;
  }

  .user-section {
    gap: 4px;
  }

  .topbar-nav-actions {
    gap: 4px;
  }

  #user-name {
    max-width: 64px;
  }

  .header-button,
  .topbar-nav-button {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    font-size: 18px;
  }
}

/*
 * Very narrow phones: keep the Otis icon, user and controls.
 * The redundant OTIS wordmark is the first thing removed.
 */
@media (max-width: 430px) {
  .brand-title {
    display: none;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
  }

  .connection-indicator {
    display: none;
  }

  #user-name {
    max-width: 50px;
  }

  .topbar-help-button strong {
    display: none;
  }
}

/*
 * Extreme-width fallback. Navigation remains reachable.
 */
@media (max-width: 350px) {
  #user-name {
    display: none;
  }

  .topbar {
    gap: 5px;
  }

  .user-section,
  .topbar-nav-actions {
    gap: 3px;
  }
}


/* --------------------------------------------------------
   YOUTUBE
   -------------------------------------------------------- */

.video-fullscreen {
  position: absolute;
  z-index: 3;
  top: -18px;
  right: 40px;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: #071426;
  color: #fff;

  font-size: 21px;
}

.video-fullscreen:hover,
.video-fullscreen:focus-visible {
  border-color: rgba(34, 217, 255, .55);
  background: #0a2036;
  outline: none;
}

/*
 * Fullscreen is intentionally controlled by Otis instead of
 * giving the cross-origin YouTube iframe exclusive fullscreen.
 * This preserves the kid-visible Close control.
 */
.video-modal.otis-video-fullscreen {
  padding: 0;
  place-items: stretch;
}

.video-modal.otis-video-fullscreen .video-dialog {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
}

.video-modal.otis-video-fullscreen .video-frame-wrap {
  position: relative;

  width: 100%;
  height: 100%;

  border: 0;
  border-radius: 0;
}

.video-modal.otis-video-fullscreen
.video-frame-wrap iframe {
  width: 100%;
  height: 100%;

  aspect-ratio: auto;
}

.video-modal.otis-video-fullscreen
.youtube-player-controls,

.video-modal.otis-video-fullscreen
.youtube-similar {
  display: none !important;
}

.video-modal.otis-video-fullscreen
.video-close {
  position: fixed;

  top:
    calc(12px + env(safe-area-inset-top));
  right:
    calc(12px + env(safe-area-inset-right));

  z-index: 1205;

  width: 48px;
  height: 48px;

  background: rgba(3, 12, 24, .88);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}

.video-modal.otis-video-fullscreen
.video-fullscreen {
  position: fixed;

  top:
    calc(12px + env(safe-area-inset-top));
  right:
    calc(70px + env(safe-area-inset-right));

  z-index: 1205;

  width: 48px;
  height: 48px;

  background: rgba(3, 12, 24, .88);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}

@media (max-width: 650px) {
  .video-fullscreen {
    top: 8px;
    right: 60px;
  }
}


/* --------------------------------------------------------
   GAMES
   -------------------------------------------------------- */

/*
 * The app grid has already allocated the available game area.
 * Do not subtract topbar/navigation heights from the iframe
 * a second time.
 */
.otis-games-view,
.otis-games-shell {
  min-height: 0;
}

.otis-games-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 0 !important;
}

/*
 * Individual games become immersive. The Games launcher itself
 * retains the normal Otis header and bottom navigation.
 */
.app.game-immersive {
  width: 100%;
  height: 100vh;
  height: 100dvh;

  grid-template-rows:
    minmax(0, 1fr);
}

.app.game-immersive > .topbar,
.app.game-immersive > .bottom-nav,
.app.game-immersive > .status-bar {
  display: none !important;
}

.app.game-immersive > .view-stack {
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.app.game-immersive .otis-games-view,
.app.game-immersive .otis-games-shell,
.app.game-immersive .otis-games-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.game-immersive-nav {
  position: fixed;

  top:
    calc(10px + env(safe-area-inset-top));
  right:
    calc(10px + env(safe-area-inset-right));

  z-index: 1200;

  display: flex;
  align-items: center;
  gap: 7px;

  padding: 6px;

  border: 1px solid rgba(85, 185, 255, .24);
  border-radius: 17px;

  background: rgba(3, 12, 24, .82);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .42);
  backdrop-filter: blur(12px);
}

.game-immersive-nav button {
  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  padding: 0;

  border: 1px solid rgba(85, 185, 255, .30);
  border-radius: 13px;

  background: rgba(12, 34, 54, .94);
  color: #fff;

  font: inherit;
  font-size: 21px;
  font-weight: 850;

  cursor: pointer;
}

.game-immersive-nav button:hover,
.game-immersive-nav button:focus-visible {
  border-color: rgba(34, 217, 255, .62);
  background: rgba(18, 54, 78, .98);
  outline: none;
}

#otis-game-immersive-close:hover,
#otis-game-immersive-close:focus-visible {
  border-color: rgba(255, 111, 118, .58);
  background: rgba(95, 30, 42, .95);
}




/* ========================================================
   OTIS SHARED PROFILE CHOOSER 20260910
   ======================================================== */

.shared-profile-screen {
  position: fixed;
  inset: 0;
  z-index: 5000;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    radial-gradient(
      circle at top,
      rgba(20, 80, 120, .32),
      transparent 42%
    ),
    #06111f;

  overflow: auto;
}

.shared-profile-card {
  width: min(900px, 100%);
  min-height: 520px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 34px;

  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;

  background: rgba(7, 20, 38, .96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);

  text-align: center;
}

.shared-profile-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin-bottom: 8px;
}

.shared-profile-card h1 {
  margin: 6px 0 4px;
  font-size: clamp(32px, 5vw, 54px);
}

.shared-profile-subtitle {
  margin: 0 0 28px;
  opacity: .78;
  font-size: 18px;
}

.shared-profile-grid {
  width: 100%;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.shared-profile-button {
  min-height: 132px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 8px;
  padding: 18px;

  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;

  background: rgba(255, 255, 255, .055);
  color: inherit;

  font-size: 26px;
  font-weight: 700;

  touch-action: manipulation;
}

.shared-profile-button:hover,
.shared-profile-button:focus-visible {
  border-color: rgba(34, 217, 255, .65);
  background: rgba(34, 217, 255, .11);
  outline: none;
}

.shared-profile-role {
  font-size: 13px;
  font-weight: 500;
  opacity: .62;
}

.shared-profile-error {
  min-height: 24px;
  margin-top: 16px;
  color: #ff9a9a;
}

.shared-adult-pin {
  width: min(390px, 100%);
  margin-top: 18px;

  padding: 22px;

  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;

  background: rgba(0, 0, 0, .22);
}

.shared-adult-pin h2 {
  margin: 0 0 16px;
}

.shared-adult-pin-display {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 16px;

  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;

  font-size: 30px;
  letter-spacing: 12px;
}

.shared-pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.shared-pin-pad button {
  min-height: 64px;

  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 15px;

  background: rgba(255, 255, 255, .07);
  color: inherit;

  font-size: 26px;
  font-weight: 700;

  touch-action: manipulation;
}

.shared-pin-pad button:hover,
.shared-pin-pad button:focus-visible {
  background: rgba(34, 217, 255, .14);
  border-color: rgba(34, 217, 255, .6);
  outline: none;
}

.shared-pin-cancel {
  width: 100%;
  min-height: 50px;
  margin-top: 12px;

  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;

  background: transparent;
  color: inherit;
}

@media (max-width: 720px) {
  .shared-profile-screen {
    padding: 12px;
  }

  .shared-profile-card {
    padding: 22px 14px;
    border-radius: 20px;
  }

  .shared-profile-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .shared-profile-button {
    min-height: 110px;
    font-size: 22px;
  }
}

@media (max-width: 420px) {
  .shared-profile-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   OTIS SHARED KIOSK SESSION CONTROLS 20260910
   ========================================================== */

.shared-switch-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding-inline: 0.8rem;
  white-space: nowrap;
  font-weight: 700;
}

.shared-switch-user.hidden {
  display: none !important;
}

@media (max-width: 720px) {
  .shared-switch-user {
    padding-inline: 0.65rem;
  }

  .shared-switch-user strong {
    font-size: 0.82rem;
  }
}


/* ==========================================================
   OTIS SHARED SWITCH-USER LAYOUT FIX 20260910
   ========================================================== */

/*
 * shared-switch-user also has the generic header-button
 * class. Override header-button's fixed responsive width so
 * the label can never spill over the Settings button.
 */
.shared-switch-user {
  width: auto !important;
  height: 44px;
  min-width: max-content;
  flex: 0 0 auto !important;
  padding: 0 12px;
  overflow: hidden;
}

.shared-switch-user > span {
  flex: 0 0 auto;
}

.shared-switch-user > strong {
  display: inline;
  white-space: nowrap;
}

/*
 * On smaller header layouts use only the switch icon.
 * This preserves separate 44px touch targets for Switch User
 * and Settings instead of allowing either to overlap.
 */
@media (max-width: 720px) {
  .shared-switch-user {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
  }

  .shared-switch-user > strong {
    display: none;
  }
}



/* OTIS FAMILY SHARED-KIOSK DEVICE SETTINGS 20260910 */

.family-device-shared-settings {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.family-device-shared-settings.hidden {
  display: none !important;
}

.family-device-shared-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.family-device-shared-heading small,
.family-device-shared-option small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.family-device-shared-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 50px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.family-device-shared-option > span {
  min-width: 0;
}

.family-device-shared-option select {
  flex: 0 0 auto;
  min-width: 130px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: inherit;
}

.family-device-shared-option input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .family-device-shared-option {
    align-items: flex-start;
  }

  .family-device-shared-option select {
    min-width: 112px;
  }
}


/* OTIS FAMILY SHARED PROFILE PIN UI v0.20.59 */

.family-user-shared-pin {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.family-user-shared-pin.hidden {
  display: none !important;
}

.family-user-shared-pin-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.family-user-shared-pin-heading small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.family-user-shared-pin input {
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}


/* OTIS SHARED DEVICE PROFILE ACCESS UI v0.20.61 */

.family-device-shared-profile-access {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.family-device-shared-profile-heading small,
.family-device-shared-profile-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.family-device-shared-profile-list {
  display: grid;
  gap: 8px;
}

.family-device-shared-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}

.family-device-shared-profile-row > span {
  min-width: 0;
}

.family-device-shared-profile-row strong,
.family-device-shared-profile-row small {
  display: block;
}

.family-device-shared-profile-row small {
  margin-top: 2px;
  color: var(--muted);
}

.family-device-shared-profile-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}


/* OTIS FAMILY HOME CONTROL ACCESS 20260912 */

.family-ha-permission-dialog {
  max-width: 620px;
}

.family-ha-permission-list {
  display: grid;
  gap: 10px;
}

.family-ha-permission-person {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.family-ha-permission-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.family-ha-permission-copy {
  min-width: 0;
}

.family-ha-permission-copy strong,
.family-ha-permission-copy small {
  display: block;
}

.family-ha-permission-copy strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.family-ha-permission-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.family-ha-permission-toggles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.family-ha-permission-toggles label {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  color: #e8f7ff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.family-ha-permission-toggles input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--cyan);
}

.family-ha-permission-toggles input[type="checkbox"]:disabled {
  opacity: .45;
  cursor: default;
}

.family-ha-permission-toggles label:has(
  input[type="checkbox"]:disabled
) {
  opacity: .55;
  cursor: default;
}

.family-ha-permission-person > .family-console-mini-button {
  justify-self: start;
  min-height: 38px;
  padding: 8px 12px;
}

.family-ha-permission-person > .family-console-mini-button:disabled {
  opacity: .45;
  cursor: default;
}

#family-ha-permission-error {
  margin-top: 12px;
}

@media (max-width: 600px) {
  .family-ha-permission-person {
    padding: 12px;
  }

  .family-ha-permission-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .family-ha-permission-toggles {
    grid-template-columns: 1fr;
  }

  .family-ha-permission-person > .family-console-mini-button {
    width: 100%;
    min-height: 44px;
  }
}

/* Protected storybook previews and touch controls. */
.storybook-dialog {
  position: fixed;
  inset: 24px;
  z-index: 10000;
  overflow: auto;
  overscroll-behavior: contain;
  background: #081327;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
  overflow-wrap: anywhere;
}
.storybook-dialog h3 { margin: 18px 0 10px; color: var(--text); font-size: clamp(22px,3vw,30px); }
.storybook-dialog > p { color: var(--muted); line-height: 1.5; }
.storybook-dialog [role="status"] { color: var(--cyan-soft); font-weight: 700; }
.storybook-dialog button,
.storybook-dialog select {
  max-width: 100%;
  min-height: 44px;
  margin: 6px 8px 6px 0;
  padding: 10px 12px;
  border: 1px solid rgba(34,217,255,.3);
  border-radius: 11px;
  background: #102b40;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.storybook-dialog button { font-weight: 750; }
.storybook-dialog button:hover { background: #17405a; border-color: var(--cyan); }
.storybook-dialog button:disabled { opacity: .55; cursor: default; }
.storybook-dialog select { background: #050c18; }
.storybook-dialog option { background: #050c18; color: var(--text); }
.storybook-dialog > label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; margin-right: 8px; }
.storybook-dialog button:focus-visible,
.storybook-dialog select:focus-visible,
.storybook-collection button:focus-visible,
#family-storybooks button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.storybook-dialog article {
  max-width: 700px;
  margin: 24px auto;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.65;
}
.storybook-dialog img { display: block; max-width: 100%; max-height: 420px; margin: auto; border-radius: 12px; object-fit: contain; }
.storybook-dialog audio { display: block; width: 100%; max-width: 100%; }
.storybook-dialog iframe { display: block; width: 100%; height: 65vh; margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; }
.storybook-collection,
#family-storybooks { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; min-width: 0; }
#library-storybooks { width: min(100%,1050px); margin: 0 auto; padding: 20px; overflow-y: auto; }
.storybook-collection > h4,
.storybook-collection > p,
#family-storybooks > h4,
#family-storybooks > p { flex-basis: 100%; margin: 4px 0; line-height: 1.5; }
.storybook-collection > p,
#family-storybooks > p { color: var(--muted); }
.storybook-collection button,
#family-storybooks button { max-width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; font-size: 14px; overflow-wrap: anywhere; }
.storybook-collection .storybook-book-button,
#family-storybooks .storybook-book-button { flex-basis: 100%; text-align: left; background: var(--panel-soft); }
@media (max-width: 600px) {
  .storybook-dialog { inset: 8px; padding: 14px; border-radius: 14px; }
  .storybook-dialog > label { display: flex; width: 100%; margin: 8px 0; }
  .storybook-dialog select { min-width: 0; max-width: 100%; }
  .storybook-dialog article { margin: 18px auto; font-size: 1rem; }
  #library-storybooks { padding: 16px; }
}