/* OCTO UI kit / 2.0 Abyss. Requires tokens.css. Dark glass is the default; .octo-light is the daylight variant. */
@import url('tokens.css');
@import url('fonts.css');
*{box-sizing:border-box}
.octo-root,.octo-dark{
  --surface:var(--abyss);--panel:var(--glass);--panel-strong:var(--glass-strong);--line:var(--stroke);--line-strong:var(--stroke-strong);
  --fg:var(--text);--fg-mute:var(--text-mute);--action:var(--cyan);--on-action:var(--abyss);--focus:var(--cyan);--danger:var(--error);
  --field-glow:radial-gradient(70% 50% at 85% 0%,rgba(43,107,255,.32),transparent 70%),radial-gradient(60% 45% at 0% 100%,rgba(239,98,63,.18),transparent 70%);
}
.octo-root{font:16px/1.55 var(--font-body);color:var(--fg);background:var(--field-glow),var(--surface);background-attachment:fixed;-webkit-font-smoothing:antialiased}
.octo-light{
  --surface:#EEF2F8;--panel:rgba(255,255,255,.62);--panel-strong:rgba(255,255,255,.85);--line:rgba(5,9,18,.12);--line-strong:rgba(5,9,18,.24);
  --fg:#050912;--fg-mute:rgba(5,9,18,.62);--action:#1A4FD6;--on-action:#F5F3EB;--focus:#1A4FD6;--danger:#C8203F;
  --field-glow:radial-gradient(70% 50% at 85% 0%,rgba(63,216,255,.35),transparent 70%),radial-gradient(60% 45% at 0% 100%,rgba(239,98,63,.18),transparent 70%);
}
.octo-root h1,.octo-root h2,.octo-root h3,.octo-display{font-family:var(--font-display);letter-spacing:-.02em}

/* Glass surfaces */
.octo-glass,.octo-card,.octo-dialog,.octo-toast{background:linear-gradient(160deg,var(--panel-strong),var(--panel));border:1px solid var(--line);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--shadow)}
.octo-card{border-radius:var(--radius-card);padding:24px}

/* Buttons */
.octo-button{font:600 14px var(--font-body);min-height:44px;padding:12px 22px;border:1px solid transparent;border-radius:var(--radius-control);background:linear-gradient(135deg,var(--cyan),var(--electric));color:var(--abyss);cursor:pointer;box-shadow:var(--glow-cyan);transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast),opacity var(--duration-fast)}
.octo-light .octo-button{background:linear-gradient(135deg,#2B6BFF,#1A4FD6);color:#F5F3EB;box-shadow:0 8px 20px -8px rgba(43,107,255,.7)}
.octo-button:hover{box-shadow:0 0 32px -2px rgba(63,216,255,.85);transform:translateY(-1px)}
.octo-button:active{transform:translateY(1px)}
.octo-button:disabled{opacity:.38;cursor:not-allowed;box-shadow:none;transform:none}
.octo-button--secondary{background:var(--panel);color:var(--fg);border-color:var(--line-strong);box-shadow:none;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.octo-light .octo-button--secondary{background:var(--panel);color:var(--fg);box-shadow:none}
.octo-button--secondary:hover{background:var(--panel-strong);box-shadow:none}
.octo-button--accent,.octo-light .octo-button--accent{background:linear-gradient(135deg,var(--ember),var(--vermillion));color:var(--abyss);box-shadow:var(--glow-vermillion)}
.octo-button--accent:hover{box-shadow:0 0 32px -2px rgba(239,98,63,.9)}
.octo-button[aria-busy=true]{position:relative;color:transparent}
.octo-button[aria-busy=true]:after{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(5,9,18,.3);border-top-color:var(--abyss);animation:octo-spin .8s linear infinite}
:where(.octo-root) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 6px rgba(63,216,255,.18)}
.octo-root a{color:var(--fg)}

/* Fields */
.octo-field{display:grid;gap:8px;margin:20px 0}
.octo-label{font-size:13px;font-weight:600;color:var(--fg-mute);letter-spacing:.02em}
.octo-input{font:16px var(--font-body);background:var(--panel);color:var(--fg);border:1px solid var(--line-strong);border-radius:var(--radius-control);min-height:48px;padding:12px 14px;width:100%;transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.octo-input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(63,216,255,.16)}
.octo-input option{background:var(--deep);color:var(--chalk)}
.octo-light .octo-input option{background:#fff;color:#050912}
.octo-input[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(255,92,122,.16)}
.octo-help{font-size:12px;margin:0;color:var(--fg-mute)}
.octo-error,.octo-help.octo-error{color:var(--danger)}

/* Selection */
.octo-check{display:flex;gap:10px;align-items:center;min-height:44px}
.octo-check input{width:20px;height:20px;accent-color:var(--action)}
.octo-root fieldset{border:1px solid var(--line);border-radius:var(--radius-control);padding:8px 16px}
.octo-root input[type=range]{accent-color:var(--action);width:100%}
.octo-switch{position:relative;width:52px;height:44px;background:transparent;border:0;cursor:pointer;flex:none}
.octo-switch:before{content:'';position:absolute;inset:9px 0;border-radius:20px;background:var(--panel-strong);border:1px solid var(--line-strong);transition:background var(--duration-fast),box-shadow var(--duration-fast)}
.octo-switch:after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;left:4px;top:12px;background:var(--chalk);box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform var(--duration-fast) var(--ease-out)}
.octo-switch[aria-checked=true]:before{background:linear-gradient(135deg,var(--cyan),var(--electric));border-color:transparent;box-shadow:var(--glow-cyan)}
.octo-switch[aria-checked=true]:after{transform:translateX(24px);background:var(--abyss)}
.octo-light .octo-switch[aria-checked=true]:after{background:#fff}

/* Navigation */
.octo-tabs{display:flex;gap:4px;padding:4px;border-radius:calc(var(--radius-control) + 4px);background:var(--panel);border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto}
.octo-tabs button{font:500 14px var(--font-body);min-height:40px;background:none;border:0;border-radius:var(--radius-control);padding:8px 16px;color:var(--fg-mute);cursor:pointer;white-space:nowrap;transition:background var(--duration-fast),color var(--duration-fast)}
.octo-tabs button:hover{color:var(--fg)}
.octo-tabs [aria-selected=true]{background:var(--panel-strong);color:var(--fg);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px var(--line-strong)}

/* Status */
.octo-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(63,216,255,.12);color:var(--cyan);border:1px solid rgba(63,216,255,.4);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.octo-light .octo-badge{color:#1A4FD6;background:rgba(43,107,255,.1);border-color:rgba(43,107,255,.35)}
.octo-alert{padding:14px 16px;border-radius:var(--radius-control);background:rgba(198,243,107,.1);color:var(--lime);border:1px solid rgba(198,243,107,.35)}
.octo-light .octo-alert{color:#2E6B12;background:rgba(198,243,107,.25)}
.octo-alert--error,.octo-light .octo-alert--error{background:rgba(255,92,122,.1);color:var(--danger);border-color:rgba(255,92,122,.4)}
.octo-avatar{width:44px;height:44px;background:linear-gradient(135deg,var(--violet),var(--electric));color:var(--chalk);border-radius:50%;display:inline-grid;place-items:center;font:600 14px var(--font-display);box-shadow:0 0 0 2px var(--abyss),0 0 0 3px rgba(159,140,255,.6)}
.octo-progress{-webkit-appearance:none;appearance:none;width:100%;height:8px;border:0;border-radius:8px;background:var(--panel-strong);overflow:hidden}
.octo-progress::-webkit-progress-bar{background:var(--panel-strong);border-radius:8px}
.octo-progress::-webkit-progress-value{background:linear-gradient(90deg,var(--electric),var(--cyan));border-radius:8px;box-shadow:var(--glow-cyan)}
.octo-progress::-moz-progress-bar{background:linear-gradient(90deg,var(--electric),var(--cyan));border-radius:8px}
.octo-skeleton{height:16px;border-radius:8px;margin:12px 0;background:linear-gradient(90deg,var(--panel) 0%,var(--panel-strong) 50%,var(--panel) 100%);background-size:200% 100%;animation:octo-shimmer 1.4s linear infinite}
.octo-spinner{height:24px;width:24px;border:3px solid var(--panel-strong);border-top-color:var(--cyan);border-radius:50%;animation:octo-spin .8s linear infinite;filter:drop-shadow(0 0 6px rgba(63,216,255,.7))}

/* Overlay */
.octo-dialog{color:var(--fg);padding:32px;border-radius:var(--radius-sheet);max-width:calc(100% - 40px);width:480px;background:linear-gradient(160deg,rgba(19,33,61,.92),rgba(11,20,38,.88))}
.octo-light .octo-dialog{background:rgba(255,255,255,.92)}
.octo-dialog::backdrop{background:rgba(5,9,18,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.octo-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);color:var(--fg);padding:14px 22px;border-radius:999px;z-index:10;background:linear-gradient(160deg,rgba(19,33,61,.92),rgba(11,20,38,.9))}
.octo-light .octo-toast{background:rgba(255,255,255,.95)}

@keyframes octo-spin{to{transform:rotate(360deg)}}
@keyframes octo-shimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.octo-root *{animation:none!important;transition:none!important}.octo-spinner{border-style:dashed}}