[hidden] { display: none !important; }
body { --accent: #9ee7d0; }
.studio-nav, .account-actions { display:flex; align-items:center; gap:8px; }
.studio-nav { flex:1; }
.studio-nav button, .account-actions button { min-height:44px; padding:10px 16px; border-radius:8px; white-space:nowrap; }
.studio-nav button[aria-current="page"] { background:#233d39; color:var(--accent); }
.account-actions { margin-left:auto; }
header { gap:24px; }
.learning-actions { display:flex; gap:8px; margin:14px 0; }
.learning-actions button { flex:1; min-height:44px; }
dialog { color:#e5edf4; background:#161e26; border:1px solid #34424d; border-radius:18px; padding:32px; width:min(520px,calc(100% - 32px)); max-height:90dvh; }
dialog::backdrop { background:#071019e8; backdrop-filter:blur(8px); }
dialog h1 { margin:10px 0 12px; font-size:28px; }
dialog p { color:#b2bfca; line-height:1.8; }
.studio-form { display:grid; gap:16px; }
.studio-form label { display:grid; gap:8px; color:#c7d2dc; font-size:14px; }
.studio-form input, .studio-form textarea, .studio-form select { width:100%; min-height:44px; border:1px solid #3e4d5b; background:#0f171f; border-radius:8px; padding:12px; color:#eef5fa; font:inherit; }
.studio-form textarea { resize:vertical; min-height:120px; }
.studio-form input[type="file"] { padding:8px; }
.studio-form button, .studio-btn { border:1px solid #41505e; border-radius:8px; padding:11px 16px; min-height:44px; }
.studio-form .primary, .studio-btn.primary { color:#102a23; background:var(--accent); border-color:var(--accent); font-weight:700; }
button:disabled { opacity:.5; cursor:wait; }
.error { color:#ffb4b4; white-space:pre-wrap; }
.success { color:var(--accent); }
.muted { color:#a8b6c3; font-size:13px; line-height:1.8; }
.studio-links { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
a { color:var(--accent); }
#workspace-page { max-width:1240px; margin:0 auto; padding:32px 24px 80px; min-height:calc(100dvh - 130px); }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.page-heading h1 { margin:0 0 8px; font-size:28px; }
.workspace-tabs { display:flex; gap:8px; margin:24px 0; flex-wrap:wrap; }
.workspace-tabs button { padding:12px 18px; min-height:44px; border-radius:8px; border:1px solid #34424d; }
.workspace-tabs button.active { background:#233d39; color:var(--accent); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:16px; }
.studio-card { padding:24px; background:#171f28; border:1px solid #303d49; border-radius:12px; overflow-wrap:anywhere; }
.studio-card h2 { font-size:18px; margin:0 0 12px; }
.studio-card p { line-height:1.7; }
.studio-card .body { white-space:pre-wrap; }
.card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.status { display:inline-block; font-size:12px; border-radius:20px; background:#233d39; color:var(--accent); padding:4px 10px; }
.images { display:flex; gap:8px; flex-wrap:wrap; }
.images img { width:110px; height:90px; object-fit:contain; background:#0e151c; border-radius:6px; }
.table-wrap { overflow:auto; }
table { border-collapse:collapse; width:100%; text-align:left; font-size:14px; }
th, td { padding:16px; border-bottom:1px solid #33414d; white-space:nowrap; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100; background:#233d39; color:#e9fff7; padding:14px 24px; border:1px solid #52766a; border-radius:10px; max-width:90vw; }
.auth-brand { letter-spacing:3px; color:var(--accent); font-size:12px; }
.empty { text-align:center; padding:60px 20px; border:1px dashed #3e4d5b; border-radius:12px; color:#a8b6c3; }
@media(max-width:1100px) { header { flex-wrap:wrap; height:auto; padding:16px; gap:10px; } .brand { flex:1; } .studio-nav { order:3; width:100%; overflow:auto; } .account-actions { margin-left:0; } }
@media(max-width:600px) { dialog { padding:24px; } #workspace-page { padding:24px 16px 60px; } .page-heading { align-items:start; flex-direction:column; } .studio-nav button { padding:10px 12px; } .account-actions button { padding:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }