:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--success-rgb:44,231,129;--error-rgb:255,83,106;--info-rgb:64,150,255}
.session-cache-note{font-size:11px;color:#a0a0a0;margin:11px 0;line-height:1.6;overflow-wrap:anywhere}
.upload-widget{margin:18px 0}
.upload-zone{position:relative;display:flex;align-items:center;flex-direction:column;gap:10px;text-align:center;border:1px dashed #535353;border-radius:16px;background:#000;padding:25px 16px;cursor:pointer;transition:border-color 160ms ease,box-shadow 160ms ease}
.upload-zone strong{font-size:15px;color:#fff}.upload-zone>span:not(.upload-symbol){font-size:12px;color:#b5b5b5}.upload-zone b{color:#c399ff}.upload-zone small{font-size:12px;color:#999;line-height:1.5}
.upload-symbol{display:grid;place-items:center;width:48px;height:48px;border:1px solid #4b3467;border-radius:14px;color:#c399ff;margin-bottom:4px;transition:transform 180ms var(--ease-out)}
.upload-symbol svg{width:23px;height:23px}.upload-zone.drag-over{border-color:#bd7fff;box-shadow:0 0 28px #a448ff30,inset 0 0 28px #a448ff0c}.upload-zone.drag-over .upload-symbol{transform:translateY(-4px)}
.upload-zone:focus-within{outline:2px solid #be8cff;outline-offset:3px}.upload-input{position:absolute;width:1px!important;height:1px!important;padding:0!important;opacity:0;overflow:hidden;clip-path:inset(50%)}
.upload-zone.checking{opacity:.65;cursor:progress}.upload-previews{display:grid;gap:10px;margin-top:14px}.upload-previews:empty{display:none}
.upload-preview{display:flex;align-items:center;gap:16px;border:1px solid #343434;border-radius:14px;padding:16px;background:#000;min-width:0}
.upload-preview img{width:112px;height:112px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #a459f0}.upload-preview.multiple img{width:64px;height:64px}
.upload-file-info{display:grid;gap:6px;flex:1;min-width:0}.upload-file-info strong{font-size:13px;overflow-wrap:anywhere;color:#eee}.upload-file-info small,.upload-file-info span{font-size:12px;line-height:1.5;color:#a8a8a8}
.upload-remove{flex-shrink:0;align-self:flex-start;min-width:44px;min-height:44px}.upload-file-symbol{color:#c399ff}.upload-file-symbol svg{width:34px;height:34px}
.upload-hint{font-size:12px;line-height:1.7;color:#999;margin-top:13px}.upload-error{font-size:12px;line-height:1.6;color:#ff8392;margin-top:10px}.upload-error:empty{display:none}
.uploading .upload-widget{pointer-events:none;opacity:.65}
@media(hover:hover){.upload-zone:hover{border-color:#ad75e4;box-shadow:0 0 22px #a448ff15}}
@media(max-width:480px){.upload-preview{flex-wrap:wrap;gap:12px}.upload-preview:not(.multiple) img{width:88px;height:88px}.upload-remove{margin-left:auto}.upload-preview:not(.multiple) .upload-file-info{flex-basis:calc(100% - 110px)}.upload-zone{padding:22px 12px}}
@media(prefers-reduced-motion:reduce){.upload-zone,.upload-symbol{transition:none}.upload-zone.drag-over .upload-symbol{transform:none}}

/* The browser owns focus, selection, dismissal and collision handling. */
select{cursor:pointer;transition:border-color 160ms ease,box-shadow 160ms ease;background-color:#000;color:#eee;border-radius:10px}
select:focus-visible{outline:2px solid #a779ff;outline-offset:3px;box-shadow:0 0 20px #a779ff18}
select:disabled{opacity:.5;cursor:default}
input[type=range]{appearance:none;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:5px;background:#303030}
input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;margin-top:-6px;border:2px solid #c098fa;border-radius:50%;background:#9810fa;box-shadow:0 0 15px #9810fa55;transition:transform 140ms var(--ease-out)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]::-moz-range-track{height:4px;border-radius:5px;background:#303030}
input[type=range]::-moz-range-progress{height:4px;border-radius:5px;background:#9810fa}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:2px solid #c098fa;border-radius:50%;background:#9810fa;box-shadow:0 0 15px #9810fa55}
@supports (appearance:base-select){
  select,select::picker(select){appearance:base-select}
  select{display:flex;align-items:center;gap:14px;justify-content:space-between;overflow:hidden;min-height:44px;height:auto;text-align:left;white-space:nowrap}
  select::picker-icon{color:#b797ee;flex-shrink:0;transition:transform 180ms var(--ease-out)}
  select:open::picker-icon{transform:rotate(180deg)}
  select:open{border-color:#9d72da;box-shadow:0 0 24px #a779ff20}
  select::picker(select){background:#000;color:#eee;border:1px solid #55436c;border-radius:12px;padding:6px;max-height:min(340px,60vh);max-width:calc(100vw - 24px);overflow:auto;box-shadow:0 12px 45px #000c,0 0 24px #a779ff20;opacity:0;transform:translateY(-4px) scale(.97);transform-origin:top center;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),display 180ms allow-discrete,overlay 180ms allow-discrete}
  select:open::picker(select){opacity:1;transform:translateY(0) scale(1)}
  @starting-style{select:open::picker(select){opacity:0;transform:translateY(-4px) scale(.97)}}
  select option{display:flex;align-items:center;gap:14px;background:#000;border:1px solid transparent;border-radius:7px;min-height:42px;padding:10px 12px;font-size:12px;white-space:normal;overflow-wrap:anywhere;cursor:pointer;transition:background-color 120ms ease,color 120ms ease}
  select option:checked{color:#d7b8ff;border-color:#45324f;background:#090909}
  select option:focus{outline:1px solid #a779ff;outline-offset:-2px;background:#111;color:#fff}
  select option::checkmark{order:1;margin-left:auto;color:#be90ff}
  [data-input=keyboard] select::picker(select){transition:none}
}

.status-ready,.account-row:has(>.account-status.ready),.detail-card:has(>.detail-head>.account-status.ready){--status-rgb:var(--success-rgb)}
.status-error,.account-row:has(>.account-status.error),.detail-card:has(>.detail-head>.account-status.error){--status-rgb:var(--error-rgb)}
.status-neutral{--status-rgb:var(--info-rgb)}
.account-row,.detail-card,.heat-card{position:relative;border-color:rgba(var(--status-rgb,64,150,255),.36);box-shadow:0 0 20px rgba(var(--status-rgb,64,150,255),.09)}
.account-row::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 -14px 28px -22px rgba(var(--status-rgb),.75),0 0 22px rgba(var(--status-rgb),.1);opacity:.75;transition:opacity 180ms ease}
.account-row::after{content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:1px;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(var(--status-rgb),.9),transparent);box-shadow:0 2px 12px rgba(var(--status-rgb),.4);pointer-events:none}
.account-status.imported{color:rgb(var(--info-rgb))}
.account-row{transition:transform 180ms var(--ease-out),border-color 180ms ease,background-color 180ms ease}
.account-row:active{transform:scale(.985)}
.account-row:focus-visible{outline:2px solid rgba(var(--status-rgb),.9);outline-offset:4px}

#toasts{gap:12px;width:min(390px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:visible}
.toast{--notice-rgb:var(--info-rgb);position:relative;display:flex;align-items:flex-start;gap:12px;padding:17px 15px 19px;border:1px solid rgba(var(--notice-rgb),.55);border-radius:13px;background:#000;color:#fff;pointer-events:auto;box-shadow:0 0 28px rgba(var(--notice-rgb),.2),0 10px 35px #000b,inset 0 0 18px rgba(var(--notice-rgb),.04);overflow:hidden;animation:none;opacity:1;transform:translateY(0) scale(1);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.toast.success{--notice-rgb:var(--success-rgb)}
.toast.error{--notice-rgb:var(--error-rgb);background:#000;color:#fff;border-color:rgba(var(--notice-rgb),.55)}
.toast.info{--notice-rgb:var(--info-rgb)}
.toast-symbol{display:grid;place-items:center;flex:0 0 31px;height:31px;border:1px solid rgba(var(--notice-rgb),.6);border-radius:9px;color:rgb(var(--notice-rgb));box-shadow:0 0 14px rgba(var(--notice-rgb),.24)}
.toast-symbol svg{width:17px;height:17px}.toast-copy{flex:1;min-width:0}.toast-copy b{display:block;font-size:12px;font-weight:600;color:rgb(var(--notice-rgb));margin-bottom:5px}.toast-copy p{font-size:12px;line-height:1.6;color:#e5e5e5;overflow-wrap:anywhere}
.toast-close{background:transparent;border:0;border-radius:6px;color:#aaa;width:28px;height:28px;display:grid;place-items:center;flex-shrink:0;padding:0}.toast-close svg{width:14px;height:14px}.toast-close:focus-visible{outline:2px solid rgb(var(--notice-rgb));outline-offset:2px}
.toast-timer{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgb(var(--notice-rgb));box-shadow:0 -1px 12px rgba(var(--notice-rgb),.7);transform-origin:left center;animation:notice-timer 6s linear forwards}.toast.is-paused .toast-timer{animation-play-state:paused}.toast.leaving{opacity:0;transform:translateY(16px) scale(.98);pointer-events:none}
@starting-style{.toast{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes notice-timer{to{transform:scaleX(0)}}

/* Feedback, navigation continuity and short entrances; no movement of live log data. */
.btn,.icon-btn,.modal-tabs button,.photo-preview{transition:transform 140ms var(--ease-out),background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.btn:active,.icon-btn:active,.modal-tabs button:active,.photo-preview:active{transform:scale(.97)}
.nav-item{transition:transform 160ms var(--ease-out),color 160ms ease,border-color 160ms ease,background-color 160ms ease}
#page{animation:page-arrive 220ms var(--ease-out)}
.detail-card,.auth-card{animation:page-arrive 220ms var(--ease-out)}
@keyframes page-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
dialog{opacity:0;transform:translateY(8px) scale(.97);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out),display 220ms allow-discrete,overlay 220ms allow-discrete}
dialog[open]{opacity:1;transform:translateY(0) scale(1)}
dialog::backdrop{opacity:0;transition:opacity 220ms var(--ease-out),display 220ms allow-discrete,overlay 220ms allow-discrete}dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:translateY(8px) scale(.97)}dialog[open]::backdrop{opacity:0}}
.sidebar{transition:transform 250ms var(--ease-drawer),visibility 250ms allow-discrete}
.heat-advanced[open]>:not(summary){animation:page-arrive 180ms var(--ease-out)}
input[type=checkbox]{cursor:pointer;transition:transform 140ms var(--ease-out)}input[type=checkbox]:active{transform:scale(.9)}
@media(hover:hover) and (pointer:fine){
  .account-row:hover{transform:translateY(-2px);border-color:rgba(var(--status-rgb),.7)}.account-row:hover::before{opacity:1}
  .nav-item:hover{transform:translateX(3px)}.btn:hover,.icon-btn:hover{transform:translateY(-1px)}.btn:active,.icon-btn:active{transform:scale(.97)}
  .toast-close:hover{background:rgba(var(--notice-rgb),.12);color:#fff}
  select:hover{border-color:#79618f}select option:hover{background:#101010;color:#fff}
}
@media(max-width:640px){#toasts{left:16px;right:16px;bottom:16px;width:auto;max-width:none}.toast-close{width:44px;height:44px}.toast{padding:14px 12px 17px}.toast-copy p{font-size:12px}.account-row .account-title svg{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){
  #page,.detail-card,.auth-card,.heat-advanced[open]>:not(summary){animation:none;transform:none}
  .account-row:hover,.account-row:active,.btn:hover,.btn:active,.icon-btn:hover,.icon-btn:active,.nav-item:hover,.photo-preview:active{transform:none}
  dialog,dialog[open],.toast,.toast.leaving{transform:none;transition:opacity 120ms ease,display 120ms allow-discrete,overlay 120ms allow-discrete}
  select::picker(select),select:open::picker(select){transform:none;transition:opacity 120ms ease,display 120ms allow-discrete,overlay 120ms allow-discrete}
  select::picker-icon,select:open::picker-icon{transform:none}.toast-timer{display:none}
  input[type=range]:active::-webkit-slider-thumb{transform:none}
  @starting-style{dialog[open],.toast,select:open::picker(select){transform:none}}
}

.heat-startup-settings .check{margin:14px 0}.heat-startup-settings p{font-size:12px;line-height:1.7;margin-top:12px}.heat-startup-settings input{flex-shrink:0}