/* Focora — iOS liquid glass design system · Araf Studio */
:root, :root[data-theme="dark"] {
  --font: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",system-ui,Inter,Carlito,"Helvetica Neue",Arial,sans-serif;
  --bg:#070A1C; --text:#F5F7FF; --muted:rgba(232,236,255,.64); --faint:rgba(232,236,255,.38);
  --glass:rgba(255,255,255,.075); --glass-hi:rgba(255,255,255,.13); --stroke:rgba(255,255,255,.17); --soft:rgba(255,255,255,.09);
  --spec:rgba(255,255,255,.30); --shadow:0 14px 34px rgba(2,4,20,.5);
  --blue:#5B8CFF; --violet:#8B5CF6; --teal:#2DD4BF; --amber:#FFB454; --rose:#FF5C8A; --danger:#FF6B7A; --ok:#34D399;
  --accent:linear-gradient(135deg,#5B8CFF 0%,#8B5CF6 100%);
  --brand-grad:linear-gradient(90deg,#8CB0FF,#C4A6FF 60%,#FF9EC0);
  --o1:#3558FF; --o2:#8B5CF6; --o3:#10B5A5; --o4:#FF5C8A; --orb-op:.78;
  --phase-a:#5B8CFF; --phase-b:#A06BFF; --knob:#fff; --track:rgba(255,255,255,.2);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg:#E8EDFF; --text:#0E1330; --muted:rgba(14,19,48,.62); --faint:rgba(14,19,48,.4);
  --glass:rgba(255,255,255,.52); --glass-hi:rgba(255,255,255,.75); --stroke:rgba(255,255,255,.9); --soft:rgba(14,19,48,.09);
  --spec:rgba(255,255,255,.95); --shadow:0 12px 30px rgba(60,70,140,.18);
  --o1:#7C9BFF; --o2:#B79BFF; --o3:#6EE7D6; --o4:#FFA3C0; --orb-op:.85; --track:rgba(14,19,48,.16);
  --brand-grad:linear-gradient(90deg,#3F63F0,#7A3FE0 60%,#D9366F);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg:#E8EDFF; --text:#0E1330; --muted:rgba(14,19,48,.62); --faint:rgba(14,19,48,.4);
    --glass:rgba(255,255,255,.52); --glass-hi:rgba(255,255,255,.75); --stroke:rgba(255,255,255,.9); --soft:rgba(14,19,48,.09);
    --spec:rgba(255,255,255,.95); --shadow:0 12px 30px rgba(60,70,140,.18);
    --o1:#7C9BFF; --o2:#B79BFF; --o3:#6EE7D6; --o4:#FFA3C0; --orb-op:.85; --track:rgba(14,19,48,.16);
    --brand-grad:linear-gradient(90deg,#3F63F0,#7A3FE0 60%,#D9366F);
    color-scheme: light;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.4}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Aurora backdrop */
.stage{position:fixed;inset:0;overflow:hidden;z-index:-1;background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.04),transparent 60%),var(--bg)}
.orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:var(--orb-op);animation:drift 22s ease-in-out infinite alternate}
.o1{width:300px;height:300px;left:-90px;top:-80px;background:var(--o1)}
.o2{width:280px;height:280px;right:-90px;top:140px;background:var(--o2);animation-delay:-7s}
.o3{width:260px;height:260px;left:10%;bottom:-100px;background:var(--o3);animation-delay:-13s}
.o4{width:170px;height:170px;right:6%;bottom:60px;background:var(--o4);opacity:.5;animation-delay:-4s}
@keyframes drift{to{transform:translate3d(26px,-22px,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}*{transition:none!important}}

/* Liquid glass */
.glass{position:relative;background:var(--glass);border:1px solid var(--soft);border-radius:22px;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--shadow),inset 0 1px 0 var(--spec),inset 0 -1px 0 rgba(255,255,255,.04)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 66%,rgba(255,255,255,.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass.sm{border-radius:16px;box-shadow:0 6px 18px rgba(2,4,20,.28),inset 0 1px 0 var(--spec)}

/* Brand */
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:34px;height:34px;flex:none;filter:drop-shadow(0 4px 10px rgba(109,155,255,.45))}
.brand b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.studio{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted)}
.studio em{font-style:normal;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

/* Controls */
.icon-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--text);transition:transform .2s,background .2s}
.icon-btn:hover{background:var(--glass-hi)} .icon-btn:active{transform:scale(.92)}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:14px;isolation:isolate;
  background:var(--glass);border:1px solid var(--soft);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.seg-thumb{position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/var(--n,2));border-radius:11px;
  transform:translateX(calc(var(--i,0)*100%));transition:transform .42s cubic-bezier(.3,1.35,.45,1);
  background:linear-gradient(180deg,var(--glass-hi),var(--glass));box-shadow:0 3px 10px rgba(2,4,20,.3),inset 0 1px 0 var(--spec),inset 0 0 0 1px var(--soft)}
.seg button{padding:7px 6px;border-radius:11px;font-size:12.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:color .25s}
.seg button.on{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:14px;font-weight:650;font-size:13.5px;color:var(--text);
  background:var(--glass);border:1px solid var(--soft);box-shadow:inset 0 1px 0 var(--spec);transition:transform .15s,background .2s,opacity .2s}
.btn:hover{background:var(--glass-hi)} .btn:active{transform:scale(.97)} .btn[disabled]{opacity:.45;pointer-events:none}
.btn.primary{background:var(--accent);border-color:rgba(255,255,255,.3);color:#fff;box-shadow:0 8px 22px rgba(91,108,255,.45),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--danger)}
.field{width:100%;padding:10px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--soft);outline:none;transition:border-color .2s,box-shadow .2s}
.field::placeholder{color:var(--faint)}
.field:focus{border-color:rgba(139,172,255,.7);box-shadow:0 0 0 4px rgba(91,140,255,.2)}
.sw{position:relative;display:inline-block;width:51px;height:31px;flex:none}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.sw span{position:absolute;inset:0;border-radius:99px;background:var(--track);transition:background .3s;box-shadow:inset 0 0 0 1px var(--soft)}
.sw span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--knob);box-shadow:0 3px 8px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.3,1.4,.45,1)}
.sw input:checked+span{background:var(--accent)}
.sw input:checked+span::after{transform:translateX(20px)}
.sw input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:99px;font-size:12.5px;font-weight:550;background:var(--glass);border:1px solid var(--soft);box-shadow:inset 0 1px 0 var(--spec)}
.chip button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--glass-hi)}
.chip button:hover{color:var(--danger)}
.chip.add{padding:6px 12px;color:var(--muted)} .chip.add:hover{color:var(--text);background:var(--glass-hi)}
.site-ico{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 10px rgba(0,0,0,.28)}
.toast{position:fixed;left:50%;bottom:44px;transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:50;padding:10px 16px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap;max-width:92%;
  background:var(--glass-hi);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--shadow);transition:.35s cubic-bezier(.3,1.3,.45,1)}
.toast.show{opacity:1;transform:translate(-50%,0)}