/* =====================================================================================
   iOS-style finish for every page: quieter borders, tinted buttons, segmented controls with a
   sliding white thumb, filled inputs, grouped lists and sheet-like dialogs. These are only
   defaults: themes, the Studio design and the Appearance panel still override them.
   ===================================================================================== */
:root{--ios-ease:cubic-bezier(.25,.8,.25,1);--fill:color-mix(in srgb,var(--text) 6%,transparent);--fill2:color-mix(in srgb,var(--text) 10%,transparent);--seg-on:var(--card)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--seg-on:color-mix(in srgb,var(--card) 78%,#fff)}}
:root[data-theme="dark"],:root.cz-dark-text{--seg-on:color-mix(in srgb,var(--card) 78%,#fff)}

/* Cards: rounder, lighter edge. */
.card{border-radius:var(--r-card);border-color:color-mix(in srgb,var(--line) 75%,transparent)}
.card h3{font-size:15px;font-weight:650;letter-spacing:-.005em}
.card h3 a{font-size:13px;font-weight:500}

/* Buttons: grey-tinted by default, filled when primary, a gentle press. */
.btn{border:0;background:var(--fill);color:var(--text);border-radius:10px;padding:7px 14px;font-weight:550;transition:background .15s,transform .12s var(--ios-ease),filter .15s}
.btn:hover{background:var(--fill2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--on-accent,#fff)}
.btn.primary:hover{background:var(--accent);filter:brightness(1.07)}
.btn.danger{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.btn.danger:hover{background:color-mix(in srgb,var(--bad) 16%,transparent)}
.btn.sm{padding:4px 12px;border-radius:var(--r-btn)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:default;transform:none}
.filebtn{position:relative;overflow:hidden}

/* Segmented controls. */
.seg{border:0;padding:2px;border-radius:10px;background:var(--fill);overflow:visible;gap:0}
.seg button{border-radius:8px;padding:5px 13px;color:var(--text);font-weight:500;transition:background .2s var(--ios-ease),box-shadow .2s}
.seg button:hover:not(.on){background:color-mix(in srgb,var(--text) 4%,transparent)}
.seg button.on{background:var(--seg-on);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.05)}

/* Inputs: filled, no hard border, a soft accent ring on focus. */
.input,.toolbar :is(input[type=text],input[type=date],input[type=search],select),.field :is(input:not([type=checkbox]):not([type=color]):not([type=range]),select,textarea),.kv :is(input:not([type=checkbox]):not([type=color]),select),textarea.paste,.search input{
  border:1px solid transparent;background:var(--fill);border-radius:10px;color:var(--text);transition:background .15s,box-shadow .15s}
:is(.input,.toolbar input,.toolbar select,.field input,.field select,.field textarea,.kv input,.kv select,textarea.paste,.search input):focus{outline:none;background:var(--card);box-shadow:0 0 0 1px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.field>span{font-weight:550;color:var(--muted);font-size:12px}

/* On/off choices in forms and dialogs become switches; ticks stay for picking from a list. */
.check:has(>.switch){flex-direction:row-reverse;justify-content:space-between;gap:12px}
.field .check:has(>.switch){padding:4px 0}

/* Lists: softer separators and a rounded hover. */
.list .row{border-bottom-color:color-mix(in srgb,var(--line) 80%,transparent);transition:background .12s}
.list .row .t1{font-weight:550}
table.t th{font-weight:550;color:var(--muted)}
table.t td,table.t th{border-bottom-color:color-mix(in srgb,var(--line) 80%,transparent)}
table.t tr.click:hover td{background:var(--fill)}

/* Chips, pills and bars. */
.chip{border:0;background:var(--fill)}
.bar{border:0;height:7px;background:var(--fill2)}
.empty{font-size:13.5px}

/* Dialogs open like sheets. */
.overlay{background:rgba(10,14,25,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{border:0;border-radius:var(--r-win);padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.08);animation:sheet-in .3s var(--ios-ease)}
.modal h2{font-size:19px;font-weight:700;letter-spacing:-.01em}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
.modal-actions .btn{min-width:84px;justify-content:center}

/* Top bar: a slightly bigger, tighter title. */
.topbar h1{font-size:20px;font-weight:700;letter-spacing:-.015em}

/* Chat bubbles. */
.msg .bubble{border:0;border-radius:18px;background:color-mix(in srgb,var(--text) 7%,var(--card));padding:8px 13px}
.msg.me .bubble{background:var(--accent)}
.gmsg .msg-acts{display:none;margin-left:6px}.gmsg:hover .msg-acts{display:inline}
.msg-acts a{margin-left:8px;cursor:pointer;color:var(--accent-text)}
.msg-acts a[data-action="msg-delme"],.msg-acts a[data-action$="unsend"]{color:var(--bad)}

/* Timetable, calendar. */
.tt,.cal{border-radius:var(--r-card);border-color:color-mix(in srgb,var(--line) 75%,transparent)}
.tt .blk{border-radius:var(--r-sm)}

/* Grouped lists from Settings, reused on other pages, sit flush inside a grid column. */
.grid>.set-wrap{max-width:none;margin:0;padding:0}
.grid>.set-wrap>.set-group:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){.modal{animation:none}.btn:active{transform:none}}
:root.cz-noAnim .modal{animation:none}