/* My-BRO shared geometry. Theme colors are defined by each iframe. */
:root {
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px;
  --radius-control:12px; --radius-card:16px; --radius-sheet:24px;
  --touch:44px; --control-height:48px;
  --duration-fast:140ms; --duration:220ms; --ease:cubic-bezier(.16,1,.3,1);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
html { color-scheme:var(--color-scheme); }
body { font-variant-numeric:tabular-nums; }
button, input, select, textarea { font-family:inherit; }
button { touch-action:manipulation; transition:opacity var(--duration-fast),transform var(--duration-fast) var(--ease); }
button:active { transform:translateY(1px); opacity:.82; }
button:disabled { cursor:default; opacity:.5; transform:none; }
:is(button,a,input,select,textarea,[tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input::placeholder,textarea::placeholder { color:var(--sub); opacity:1; }
.ui-icon { display:inline-block; width:24px; height:24px; flex:none; fill:currentColor; vertical-align:middle; }
.ui-icon use { pointer-events:none; }
.top h1 { font-size:28px; font-weight:700; letter-spacing:-.8px; line-height:1.16; }
.top .date { font-size:13px; color:var(--sub); line-height:1.4; margin-top:4px; }
.topbar h2 { font-size:18px; font-weight:650; letter-spacing:-.3px; }
.btn,.btn2 { min-height:var(--control-height); padding:12px 16px; border-radius:var(--radius-control); font-size:16px; line-height:1.35; font-weight:600; letter-spacing:0; text-transform:none; box-shadow:none; }
.btn { background:var(--accent); color:var(--on-accent); }
.btn2 { background:var(--card); color:var(--txt); border:1px solid var(--line); }
.btnlink { min-height:var(--touch); padding:12px; font-size:14px; }
.sinput,.fld input,.fld select,.fld textarea { min-height:var(--control-height); padding:12px 14px; border:1px solid var(--line2,var(--line)); border-radius:var(--radius-control); background:var(--card); color:var(--txt); font-size:16px; }
.fld label { font-size:13px; line-height:1.4; margin-bottom:6px; }
.fldrow .fld,.kcaltrio .fld { min-width:0; }
.plus,.x,.back { min-width:var(--touch); min-height:var(--touch); }
.back:active { transform:translateY(-50%); }
.plus { border-radius:var(--radius-control); background:var(--accent); color:var(--on-accent); margin:0; box-shadow:none; }
.x { background:var(--bg); color:var(--sub); border-radius:var(--radius-control); }
.tabbar { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; padding:6px 8px calc(6px + var(--safe-bottom)); border-top:1px solid var(--line); background:var(--card); flex-shrink:0; }
.tabbar .tab { min-width:0; min-height:56px; padding:4px 0; gap:3px; font-size:12px; font-weight:500; line-height:1.25; color:var(--sub); white-space:nowrap; letter-spacing:-.2px; }
.tabbar .tab .ti { width:44px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:9px; }
.tabbar .tab svg { width:23px; height:23px; fill:currentColor; }
.tabbar .tab.active { color:var(--accent); font-weight:700; }
.tabbar .tab.active .ti { background:var(--accent-soft); }
.sheet,.psheet,.fmenu,.tmenu,.fdov { background:var(--scrim); }
.sheet .panel,.psheet .ppanel,.fmpanel,.tmpanel,.fdpop { max-width:480px; width:100%; border-radius:var(--radius-sheet) var(--radius-sheet) 0 0; background:var(--elevated); color:var(--txt); padding:16px 16px calc(16px + var(--safe-bottom)); box-shadow:0 -12px 40px rgba(0,0,0,.12); }
.sheet .panel { max-height:calc(100dvh - 24px - var(--safe-top)); overflow-y:auto; overscroll-behavior:contain; }
.sheet .sh { gap:12px; margin-bottom:12px; flex-shrink:0; }
.sheet .sh h3,.ppanel h2 { font-size:20px; font-weight:650; line-height:1.2; letter-spacing:-.4px; }
.sheet .grab,.fmpanel .grab { width:36px; height:4px; background:var(--line); border-radius:8px; margin:0 auto 12px; }
.sres { min-height:0; overscroll-behavior:contain; }
.sheet .panel,.psheet .ppanel { animation:ui-sheet-in var(--duration) var(--ease); }
.view,.screen { animation:ui-screen-in var(--duration-fast) var(--ease); }
.mi2,.tmi { min-height:56px; padding:8px 12px; margin:4px 0; gap:12px; border:1px solid transparent; border-radius:var(--radius-control); font-size:16px; font-weight:500; line-height:1.35; color:var(--txt); background:transparent; }
.mi2 span,.tmi span { width:36px; height:36px; background:var(--bg); border-radius:10px; color:var(--sub); }
.mi2.on,.tmi.on { color:var(--accent); border-color:var(--line); background:var(--accent-soft); }
.mi2.on span,.tmi.on span { background:transparent; color:var(--accent); }
.mi2:hover,.tmi:hover { background:var(--bg); border-color:var(--line); }
.mi2:active,.tmi:active { transform:translateY(1px); }
.mi2::after,.tmi::after { color:var(--sub); }
.mi2.on::after,.tmi.on::after { color:var(--accent); }
.empty { font-size:14px; line-height:1.5; color:var(--sub); padding:24px 16px; }
@keyframes ui-sheet-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes ui-screen-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

.ui-dialog-open > .view,.ui-dialog-open > .phone{pointer-events:none}
.ui-dialog-open .scroll,.ui-dialog-open .screen{overflow:hidden}
.sheet .panel,.psheet .ppanel{bottom:var(--keyboard-height,0px);max-height:calc(100dvh - 24px - var(--keyboard-height,0px))}
#ui-toast{position:fixed;bottom:calc(88px + var(--safe-bottom));left:16px;right:16px;max-width:448px;margin:auto;padding:12px 16px;background:var(--elevated);color:var(--txt);border:1px solid var(--line);border-radius:12px;z-index:500;font-size:14px;line-height:1.4;box-shadow:0 4px 24px #0002}

.tmenu .set-panel{margin-bottom:var(--keyboard-height,0px);max-height:calc(100dvh - 24px - var(--keyboard-height,0px));overflow-y:auto;overscroll-behavior:contain}