:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#150932; color:#f8f5ff; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; background:radial-gradient(900px 580px at 4% -12%,#572488 0%,transparent 60%),radial-gradient(720px 420px at 100% 14%,#b34c75 0%,transparent 62%),linear-gradient(160deg,#16093a,#29104e 60%,#150932); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.app { width:min(100%,930px); margin:0 auto; padding:clamp(18px,4vw,48px) max(18px,env(safe-area-inset-right)) 70px max(18px,env(safe-area-inset-left)); }
.top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:32px; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:850; text-decoration:none; letter-spacing:.01em; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#7a4df3,#ff6f91); box-shadow:0 10px 30px #07031e66; font-size:.82rem; }
.brand em { color:#ffd750; font-style:normal; }
.back { color:#eadfff; font-size:.92rem; text-decoration:none; }
.back:hover,.back:focus-visible { color:#fff; text-decoration:underline; }
.panel { padding:clamp(22px,5vw,45px); border:1px solid #ffffff2b; border-radius:28px; background:linear-gradient(145deg,#ffffff16,#ffffff09); box-shadow:0 24px 80px #08021e55; backdrop-filter:blur(12px); }
.eyebrow { margin:0 0 8px; color:#ffd750; text-transform:uppercase; letter-spacing:.13em; font-size:.75rem; font-weight:800; }
h1 { margin:0; font-size:clamp(2rem,6vw,3.7rem); letter-spacing:-.05em; line-height:.98; }
h2 { margin:0; font-size:1.3rem; }
.lead { max-width:680px; margin:18px 0 0; color:#d8cbed; line-height:1.6; }
.notice { margin:24px 0 0; padding:14px 16px; border:1px solid #ffffff22; border-radius:14px; background:#0e062766; color:#eee8ff; font-size:.93rem; line-height:1.5; }
.notice strong { color:#fff; }
.profile-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:0 0 26px; }
.identity { margin-top:6px; color:#d8cbed; }
.identity strong { color:#fff; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:26px; }
.provider { padding:20px; border:1px solid #ffffff22; border-radius:20px; background:#120a2e8c; }
.provider h2 { display:flex; align-items:center; gap:9px; }
.provider p { min-height:40px; margin:7px 0 16px; color:#cdbfe7; font-size:.92rem; line-height:1.45; }
.provider[data-provider="openai"] h2::before { content:"✦"; color:#62e0b7; }
.provider[data-provider="elevenlabs"] h2::before { content:"◖"; color:#ffd750; }
.provider[data-provider="anthropic"] h2::before { content:"◒"; color:#f59d74; }
.provider[data-provider="openrouter"] h2::before { content:"↗"; color:#8fb8ff; }
.state { display:inline-flex; align-items:center; gap:7px; min-height:24px; margin-bottom:14px; color:#bfb4d4; font-size:.83rem; }
.state::before { content:""; width:8px; height:8px; border-radius:100%; background:#8c819f; }
.state.ready { color:#c8f6df; }.state.ready::before { background:#4ee09e; box-shadow:0 0 12px #4ee09e; }
.field { display:grid; gap:7px; margin:12px 0; color:#e9e0f8; font-size:.84rem; font-weight:700; }
.field input,.field select { width:100%; padding:12px 13px; border:1px solid #ffffff30; border-radius:12px; outline:none; color:#fff; background:#251343; }
.field input:focus,.field select:focus { border-color:#ffd750; box-shadow:0 0 0 3px #ffd75033; }
.actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.button { min-height:42px; padding:10px 14px; border:1px solid transparent; border-radius:12px; color:#fff; background:#ffffff1a; cursor:pointer; font-weight:800; transition:transform .15s,background .15s; }
.button:hover,.button:focus-visible { transform:translateY(-1px); background:#ffffff28; }
.button.primary { color:#251229; background:linear-gradient(135deg,#ffd750,#ffb064); }.button.primary:hover,.button.primary:focus-visible { background:linear-gradient(135deg,#ffe474,#ffc27e); }
.button.danger { color:#ffdfe6; border-color:#ff729255; background:#8a2e4d44; }.button.danger:hover,.button.danger:focus-visible { background:#a63b5c77; }
.button.compact { min-height:36px; padding:7px 10px; font-size:.84rem; }
.message { min-height:22px; margin:10px 0 0; color:#d8cbed; font-size:.87rem; }.message.error { color:#ffb3c4; }.message.success { color:#a9f3ce; }
.form { max-width:480px; margin-top:28px; }.form .field { font-size:.92rem; }.form .field input { min-height:47px; }.form .actions { margin-top:18px; }
.footer { margin:30px 4px 0; color:#c5b9dc; font-size:.85rem; }.footer a { color:#ffd750; text-decoration:none; }
@media (max-width:650px) { .top { margin-bottom:25px; }.grid { grid-template-columns:1fr; }.profile-head { display:block; }.profile-head .button { margin-top:16px; }.panel { border-radius:22px; }.provider p { min-height:auto; } }
.preference-panel{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.preference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.check{display:flex;align-items:flex-start;gap:10px;margin:12px 0;color:#d8cbed;line-height:1.4}.check input{margin-top:4px;accent-color:#ffd750}
@media(max-width:680px){.preference-grid{grid-template-columns:1fr}}