/* WebIDE Studio — restrained desktop design, 2026.
   Native typography, consistent controls, quiet hierarchy, no decorative gradients. */
:root {
  color-scheme: light;
  --bg:#f5f5f7;--s1:#ffffff;--s2:#fafafb;--s3:#f0f0f2;--s4:#e9e9ed;--hov:#eeeef1;
  --tx:#1d1d1f;--tx2:#64646a;--tx3:#8b8b92;
  --bd:#e5e5e8;--bd2:#d4d4d9;
  --ac:#007aff;--ach:#0069dc;--acd:rgba(0,122,255,.09);--acb:rgba(0,122,255,.22);
  --gr:#248a51;--grd:rgba(36,138,81,.07);--grb:rgba(36,138,81,.18);
  --re:#d13b3b;--red:rgba(209,59,59,.07);--reb:rgba(209,59,59,.19);
  --am:#ac711f;--amd:rgba(172,113,31,.08);--amb:rgba(172,113,31,.2);
  --sh:0 1px 3px rgba(25,25,34,.045);--shlg:0 24px 80px rgba(25,25,34,.14),0 2px 10px rgba(25,25,34,.05);
  --rsm:7px;--r:9px;--rlg:13px;--rxl:18px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);--dur:.15s;
  --sidebar:#f7f7f9;
}
[data-theme="dark"] {
  color-scheme:dark;
  --bg:#18181b;--s1:#242427;--s2:#28282c;--s3:#343438;--s4:#414146;--hov:#36363b;
  --tx:#f5f5f7;--tx2:#b4b4bc;--tx3:#8e8e97;
  --bd:#37373b;--bd2:#4a4a50;
  --ac:#60a5fa;--ach:#82b7ff;--acd:rgba(96,165,250,.12);--acb:rgba(96,165,250,.3);
  --gr:#6bd598;--grd:rgba(107,213,152,.1);--grb:rgba(107,213,152,.2);
  --re:#ff7777;--red:rgba(255,119,119,.12);--reb:rgba(255,119,119,.23);
  --am:#eeb968;--amd:rgba(238,185,104,.1);--amb:rgba(238,185,104,.24);
  --sh:0 1px 3px rgba(0,0,0,.2);--shlg:0 28px 90px rgba(0,0,0,.42);
  --sidebar:#202023;
}
html {scroll-behavior:smooth;}
body,[data-theme="dark"] body {background:var(--bg);color:var(--tx);font-family:var(--font);font-size:13px;letter-spacing:-.008em;}
button,input,select,textarea {font-family:var(--font);}
button, a {-webkit-tap-highlight-color:transparent;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible {outline:2px solid var(--ac);outline-offset:2px;}
::selection {background:rgba(0,122,255,.18);}
::-webkit-scrollbar {width:7px;height:7px;}
::-webkit-scrollbar-thumb {background:var(--bd2);border-radius:12px;border:2px solid transparent;background-clip:padding-box;}
.btn,.l-btn-primary,.l-nav-btn,.login-btn {transform:none!important;box-shadow:none;transition:background-color .14s,color .14s,border-color .14s;}
.btn,.btn-sm {border:1px solid var(--bd2);border-radius:8px;background:var(--s1);font-size:12px;font-weight:600;color:var(--tx);padding:7px 12px;line-height:1.2;box-shadow:none;}
.btn:hover {background:var(--s3);border-color:var(--bd2);}
.btn:disabled {opacity:.4;cursor:not-allowed;pointer-events:none;}
.btn-ac,.btn-primary {background:var(--ac)!important;color:#fff!important;border-color:transparent!important;}
.btn-ac:hover,.btn-primary:hover {background:var(--ach)!important;}
.btn-green {background:#268052!important;border-color:#268052!important;color:#fff!important;}
.btn-green:hover {background:#216f48!important;}
.btn-red {background:var(--red)!important;color:var(--re)!important;border-color:var(--reb)!important;}
.btn i {font-size:11px;}
.f-inp,.input,.f-sel,.select,.login-input {height:40px;background:var(--s1);border:1px solid var(--bd2);border-radius:9px;box-shadow:inset 0 1px 1px rgba(20,20,20,.015);font-size:13px;}
.f-inp:focus,.input:focus,.f-sel:focus,.select:focus,.login-input:focus {background:var(--s1);border-color:var(--ac);box-shadow:0 0 0 3px var(--acd);}
[data-theme="dark"] .f-inp,[data-theme="dark"] .input,[data-theme="dark"] .login-input {background:var(--s2);color:var(--tx);border-color:var(--bd2);}
.field,.login-field {gap:7px;}
.f-lbl,.login-label {font-size:12px;font-weight:600;color:var(--tx2);}
.modal-backdrop {background:rgba(21,21,27,.33);backdrop-filter:blur(7px);}
.modal,[data-theme="dark"] .modal {border:1px solid var(--bd);background:var(--s1);border-radius:17px;box-shadow:var(--shlg);}
.modal-head,.modal-header,[data-theme="dark"] .modal-head {background:var(--s1);padding:21px 24px 17px;border-bottom:1px solid var(--bd);}
.modal-body {padding:22px 24px 24px;}
.modal-title {font-size:17px;font-weight:650;letter-spacing:-.4px;}
.modal-close {width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--s3);font-size:12px;}
.modal-close:hover {background:var(--s4);color:var(--tx);}
.alert {border-radius:9px;line-height:1.5;}
.toast,[data-theme="dark"] .toast {background:var(--s1);color:var(--tx);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--shlg);font-size:12px;padding:10px 15px;}
.toast.ok {background:var(--s1);border-color:var(--bd);color:var(--gr);}
.toast.err {background:var(--s1);border-color:var(--reb);color:var(--re);}
.ctx-menu,[data-theme="dark"] .ctx-menu,.pc-dropdown,[data-theme="dark"] .pc-dropdown,.umenu,[data-theme="dark"] .umenu,.user-menu,[data-theme="dark"] .user-menu {background:var(--s1);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--shlg);padding:5px;}
.ctx-item,.pcd-item,.um-item {border-radius:7px;min-height:32px;font-size:12px;padding:8px 11px;}
.ctx-item:hover,.pcd-item:hover,.um-item:hover {background:var(--s3);}
.um-head,.um-header,[data-theme="dark"] .um-header {border-radius:8px 8px 0 0;background:transparent;padding:10px 12px;}

/* App chrome */
.topbar,[data-theme="dark"] .topbar {height:58px;min-height:58px;background:var(--s1);border-bottom:1px solid var(--bd);box-shadow:none;padding:0 25px;gap:13px;}
.topbar-logo-mark,.l-logo-mark,.login-icon {background:var(--tx)!important;color:var(--s1)!important;border:none;box-shadow:none!important;border-radius:10px;}
.topbar-logo-mark {width:29px;height:29px;font-size:13px;}
.topbar-logo-text,.l-logo-text {font-size:15px;font-weight:680;letter-spacing:-.55px;}
.topbar-logo {gap:10px;}
.user-btn,[data-theme="dark"] .user-btn,.ubtn,[data-theme="dark"] .ubtn {background:transparent;border:1px solid transparent;border-radius:9px;padding:4px 7px 4px 4px;}
.user-btn:hover,.ubtn:hover {background:var(--s3);border-color:var(--bd);}
.user-av,.uav,.topbar-avatar {background:var(--s3)!important;color:var(--tx);border:1px solid var(--bd);width:27px;height:27px;font-size:11px;border-radius:50%;}
.user-name,.uname {font-size:12px;font-weight:600;}
.user-caret,.ucaret {font-size:8px;}

/* Project library: Finder-like sidebar and edge-to-edge collection */
.app-body {min-height:0;overflow:hidden;background:var(--bg);}
.studio-sidebar {width:245px;flex:0 0 245px;position:relative;background:var(--sidebar);border-right:1px solid var(--bd);padding:36px 13px 20px;display:flex;flex-direction:column;min-height:0;overflow:auto;}
.studio-side-heading {padding:0 12px;margin:0 0 11px;font-size:10px;letter-spacing:.095em;color:var(--tx3);font-weight:650;}
.studio-side-link {display:flex;align-items:center;gap:12px;min-height:37px;padding:0 12px;border-radius:9px;color:var(--tx2);font-size:12px;font-weight:550;}
.studio-side-link i {font-size:14px;width:15px;text-align:center;color:var(--tx3);}
.studio-side-link:hover,.studio-side-recent:hover {background:var(--s3);color:var(--tx);}
.studio-side-link.selected {background:var(--acd);color:var(--ac);font-weight:650;}
.studio-side-link.selected i {color:var(--ac);}
.studio-side-link span {margin-left:auto;font-size:11px;color:var(--tx3);}
.studio-recent-heading {margin-top:35px;}
.studio-side-recents {display:flex;flex-direction:column;gap:2px;}
.studio-side-recent {display:flex;align-items:center;gap:11px;height:35px;border-radius:8px;padding:0 13px;font-size:12px;color:var(--tx2);}
.studio-side-recent i {font-size:13px;width:15px;text-align:center;color:var(--tx3);}
.studio-side-recent span {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.studio-side-bottom {margin-top:auto;padding:18px 12px 0;color:var(--tx3);font-size:11px;display:flex;align-items:center;gap:8px;line-height:1.5;}
.studio-side-bottom i {font-size:11px;}
.dashboard,[data-theme="dark"] .dashboard {flex:1;max-width:none;width:auto;min-width:0;background:var(--s1);overflow:auto;padding:52px clamp(26px,4.5vw,76px) 80px;}
.dashboard>* {max-width:1120px;margin-left:auto;margin-right:auto;}
.dash-head {display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:43px;}
.dash-greeting {color:var(--tx3);font-weight:650;font-size:10px;letter-spacing:.1em;margin-bottom:12px;text-transform:uppercase;}
.dash-greeting strong {color:inherit;}
.dash-title {font-size:clamp(32px,4vw,45px);font-weight:680;line-height:1.06;letter-spacing:-1.65px;display:block;}
.dash-subtitle {font-size:13px;color:var(--tx2);margin-top:13px;line-height:1.6;}
.studio-create {height:38px;white-space:nowrap;display:flex;align-items:center;gap:9px;border-radius:9px;padding:0 15px;font-size:12px;flex-shrink:0;}
.pro-stats {display:flex;align-items:stretch;gap:0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);border-radius:0;margin-bottom:42px;padding:22px 0;}
.pro-stat {border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:0 34px 0 0;margin-right:34px;gap:10px;min-width:0;}
.pro-stat:not(:last-child){border-right:1px solid var(--bd)!important;}
.pro-stat-icon {width:32px;height:32px;font-size:13px;border-radius:8px;background:var(--s3);color:var(--tx2);}
.pro-stat-value {font-size:18px;font-weight:675;letter-spacing:-.5px;}
.pro-stat-label {font-size:11px;color:var(--tx3);}
.studio-section-head {display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:17px;}
.studio-section-head h2 {font-size:18px;font-weight:660;letter-spacing:-.6px;}
.studio-section-head span {color:var(--tx3);font-size:12px;}
.pro-toolbar {display:flex;align-items:center;gap:11px;margin:0 0 17px;}
.pro-search {height:37px;max-width:460px;border-radius:9px;padding:0 12px;background:var(--s2);border:1px solid var(--bd);box-shadow:none;}
.pro-search input {font-size:12px;}
.pro-search:focus-within {border-color:var(--ac);box-shadow:0 0 0 3px var(--acd);}
.pro-search kbd {background:var(--s1);border-color:var(--bd);color:var(--tx3);font-family:var(--mono);font-size:10px;}
.pro-sort-label {font-size:11px;font-weight:550;}
.pro-sort {height:37px;font-size:12px;border-radius:8px;background:var(--s1);border:1px solid var(--bd);}
.pro-visible {font-size:11px;color:var(--tx3);}
.studio-view-switch {height:35px;display:flex;gap:2px;align-items:center;padding:3px;background:var(--s3);border-radius:8px;flex-shrink:0;}
.studio-view-button {border:0;background:transparent;color:var(--tx3);width:31px;height:28px;border-radius:6px;display:grid;place-items:center;font-size:12px;}
.studio-view-button:hover {color:var(--tx);}
.studio-view-button[aria-pressed="true"] {background:var(--s1);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.11);}
.proj-grid[data-view="list"] {display:flex;flex-direction:column;gap:0;border:1px solid var(--bd);border-radius:12px;background:var(--s1);overflow:visible;}
.proj-grid[data-view="list"] .proj-card {display:grid;grid-template-columns:42px minmax(0,1fr) auto 27px;align-items:center;column-gap:14px;min-height:82px;padding:11px 19px;border:0;border-radius:0;border-bottom:1px solid var(--bd);background:transparent;box-shadow:none;transform:none;}
.proj-grid[data-view="list"] .proj-card:first-child {border-radius:11px 11px 0 0;}
.proj-grid[data-view="list"] .proj-card:last-child {border-bottom:0;border-radius:0 0 11px 11px;}
.proj-grid[data-view="list"] .proj-card:hover {background:var(--s2);}
.proj-grid[data-view="list"] .pc-top {display:contents;}
.proj-grid[data-view="list"] .pc-icon {grid-column:1;grid-row:1;}
.proj-grid[data-view="list"] .pc-menu-btn {grid-column:4;grid-row:1;}
.proj-grid[data-view="list"] .pc-summary {grid-column:2;grid-row:1;min-width:0;}
.proj-grid[data-view="list"] .pc-actions {grid-column:3;grid-row:1;}
.pc-icon {height:39px;width:39px;border:1px solid var(--bd);border-radius:10px;background:var(--s3)!important;color:var(--tx2);font-size:15px;}
.pc-name {font-size:13px;font-weight:650;line-height:1.35;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx);}
.pc-name:hover {color:var(--ac);}
.pc-meta {gap:15px;margin-top:6px;font-family:var(--font);font-size:11px;color:var(--tx3);}
.pc-meta span {gap:5px;}
.pc-menu-btn {height:27px;width:27px;color:var(--tx2);}
.pc-actions {gap:6px;}
.pc-actions .btn {height:30px;border-color:transparent;background:transparent;color:var(--tx2);padding:7px 10px;font-weight:550;}
.pc-actions .btn.btn-ac {background:var(--s3)!important;color:var(--tx)!important;border-color:transparent!important;}
.pc-actions .btn:hover,.pc-actions .btn.btn-ac:hover {background:var(--s4)!important;color:var(--tx)!important;}
.pc-dropdown {top:56px;right:13px;min-width:192px;}
.proj-grid[data-view="grid"] {display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px;border:0;}
.proj-grid[data-view="grid"] .proj-card {display:flex;flex-direction:column;gap:14px;min-height:179px;border:1px solid var(--bd);border-radius:12px;padding:17px;background:var(--s1);box-shadow:none;transform:none;}
.proj-grid[data-view="grid"] .proj-card:hover {background:var(--s2);border-color:var(--bd2);}
.proj-grid[data-view="grid"] .pc-top {display:flex;align-items:center;justify-content:space-between;}
.proj-grid[data-view="grid"] .pc-summary {flex:1;min-width:0;}
.proj-grid[data-view="grid"] .pc-dropdown {top:48px;right:12px;}
.proj-grid[data-view="grid"] .pc-actions {display:flex;margin-top:0;}
.proj-grid[data-view="grid"] .pc-actions .btn:first-child {flex:1;}
.proj-grid .proj-card[hidden] {display:none!important;}
.pro-empty {background:var(--s2);border:1px solid var(--bd);border-radius:10px;color:var(--tx2);}

/* Editor: clean native-feeling toolbar and file navigator */
#bar,[data-theme="dark"] #bar {height:55px;background:var(--s1);box-shadow:none;border-bottom:1px solid var(--bd);gap:7px;padding:0 15px;}
#bar .btn {height:31px;min-width:31px;padding:0 10px;font-size:11.5px;font-weight:580;border-color:var(--bd);background:var(--s1);}
#bar .btn:hover {background:var(--s3);}
#bar .btn-green {background:var(--ac)!important;border-color:var(--ac)!important;font-weight:620;}
#bar .btn-green:hover {background:var(--ach)!important;}
.editor-home {display:flex;align-items:center;gap:9px;color:var(--tx);flex-shrink:0;}
.studio-symbol {height:27px;width:27px;display:grid;place-items:center;border-radius:8px;background:var(--tx);color:var(--s1);font-size:11px;}
.editor-brand {font-size:13px;letter-spacing:-.35px;font-weight:680;}
.editor-breadcrumb {color:var(--tx3);font-size:13px;padding:0 6px;}
.editor-project-name {font-size:12px;font-weight:630;max-width:182px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2);}
.editor-workspace-label {font-size:11px;color:var(--tx3);white-space:nowrap;margin-right:6px;}
#saveInd {color:var(--tx3);font-family:var(--font);font-size:11px;white-space:nowrap;margin-right:7px;}
#saveInd.save-chg {color:var(--am);}
#saveInd.save-ok {color:var(--gr);}
#bar .ubtn {padding:3px 5px 3px 3px;}
#left,[data-theme="dark"] #left {width:258px;background:var(--sidebar);border-right:1px solid var(--bd);}
#right,[data-theme="dark"] #right {background:var(--s1);}
#tabs,[data-theme="dark"] #tabs {height:42px;background:var(--s2);border-bottom:1px solid var(--bd);gap:4px;padding:0 11px;}
#tabs .etab {height:31px!important;max-width:340px;padding:0 13px;border-radius:8px;color:var(--tx2);font-size:11px;}
#tabs .etab.on,[data-theme="dark"] #tabs .etab.on {background:var(--s1);border:1px solid var(--bd);box-shadow:0 1px 2px rgba(0,0,0,.025);font-weight:630;color:var(--tx);border-radius:7px;}
#tabs .etab:not(.on):hover {background:var(--s3);}
#codepane,[data-theme="dark"] #codepane {background:var(--s1);}
#cm .CodeMirror,[data-theme="dark"] #cm .CodeMirror {background:var(--s1)!important;color:var(--tx)!important;font-family:var(--mono)!important;font-size:12.5px!important;line-height:1.78!important;}
#cm .CodeMirror-gutters,[data-theme="dark"] .CodeMirror-gutters {background:var(--s2)!important;border-color:var(--bd)!important;}
#cm .CodeMirror-linenumber {color:var(--tx3)!important;font-size:11px;}
#cm .CodeMirror-selected {background:var(--acd)!important;}
#prevpane {border-left:1px solid var(--bd);}
#prevbar {height:37px;background:var(--s2);border-bottom:1px solid var(--bd);}
#prevbar .btn {border-color:transparent;background:transparent;}
#prevbar .btn:hover {background:var(--s3);}
#sbar,[data-theme="dark"] #sbar {height:29px;background:var(--s2);border-top:1px solid var(--bd);font-family:var(--font);font-size:10px;color:var(--tx3);padding:0 16px;}
.ws-explorer-head {padding:27px 15px 15px;}
.ws-overline {font-size:10px;letter-spacing:.1em;font-weight:600;color:var(--tx3);}
.ws-explorer-title {font-size:15px;letter-spacing:-.4px;font-weight:670;margin-top:5px;}
.ws-explorer-title span {background:var(--s3);color:var(--tx3);font-size:10px;padding:3px 7px;border-radius:6px;}
.ws-icon-btn {width:28px;height:28px;border:0;background:transparent;border-radius:7px;color:var(--tx2);}
.ws-icon-btn:hover {background:var(--s3);color:var(--tx);}
.ws-quick-actions {grid-template-columns:repeat(3,1fr);gap:5px;padding:0 12px 10px;}
.ws-quick-actions button {background:var(--s1);border:1px solid var(--bd);border-radius:7px;padding:7px 2px;font-size:10px;color:var(--tx2);font-weight:600;}
.ws-quick-actions button:hover {background:var(--s3);border-color:var(--bd2);color:var(--tx);}
#left .file-search {margin:4px 12px 12px;padding:8px 10px;border-radius:8px;background:var(--s1);border:1px solid var(--bd);box-shadow:none;}
#left .file-search:focus-within {border-color:var(--ac);box-shadow:0 0 0 3px var(--acd);}
.file-search input {font-size:11px;}
.file-search kbd {display:none;font-family:var(--mono);}
.ws-location {min-height:33px;background:transparent;border:0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);font-family:var(--font);font-size:11px;padding:8px 15px;}
.ws-location>i {color:var(--tx3);}
.ws-root {min-height:34px;border:0;margin:2px 5px 5px;background:transparent;border-radius:8px;font-weight:650;color:var(--tx2);}
.ws-root i {color:var(--tx2);}
.ws-root:hover {background:var(--s3);}
.ws-root.selected {background:var(--acd);border:0;color:var(--ac);}
.ws-root.selected i {color:var(--ac);}
.ws-tree {padding:8px 6px 14px!important;}
.ws-row {border:0;border-radius:7px;min-height:30px;padding-top:4px;padding-bottom:4px;color:var(--tx2);}
.ws-row:hover {background:var(--s3);}
.ws-row.active {border:0;background:var(--acd);color:var(--ac);font-weight:600;}
.ws-row.selected {background:var(--s3);color:var(--tx);}
.ws-node-label {font:500 11px/1.5 var(--font);letter-spacing:-.06px;}
.ws-row.active .ws-node-label {font-weight:620;}
.ws-child-count {font-size:9px;background:transparent;}
.ws-row>i.ws-folder-icon {color:#b68a47;}
.ws-row>i.fa-image {color:#8b77a6;}
.ws-row>i.fa-html5 {color:#b97755;}
.ws-row>i.fa-css3-alt {color:#658ebd;}
.ws-row>i.fa-php {color:#7d82b8;}
.studio-explorer-footer {padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:5px;border-top:1px solid var(--bd);}
.studio-explorer-footer .btn.w100 {min-height:30px!important;justify-content:center;white-space:nowrap;padding:6px 5px!important;border-color:var(--bd);font-size:10.5px!important;background:transparent;border-radius:7px!important;color:var(--tx2);}
.studio-explorer-footer .btn.w100:hover {background:var(--s3);color:var(--tx);}
.studio-explorer-footer .btn.w100:nth-child(3),.studio-explorer-footer .btn.w100:nth-child(4) {grid-column:auto;}
.ws-asset-view {background:var(--s1);}
.ws-asset-toolbar {height:44px;background:var(--s1);padding:0 21px;}
.ws-asset-toolbar span {color:var(--tx2);font-size:11px;font-weight:600;letter-spacing:0;}
.ws-asset-canvas {background-color:var(--bg);background-image:linear-gradient(45deg,var(--s3) 25%,transparent 25%),linear-gradient(-45deg,var(--s3) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--s3) 75%),linear-gradient(-45deg,transparent 75%,var(--s3) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;padding:36px;}
.ws-asset-canvas img {filter:drop-shadow(0 12px 24px rgba(0,0,0,.10));}
.ws-asset-details {background:var(--s1);font-size:11px;}
.ws-welcome {background:var(--s1)!important;}
.ws-welcome-art {transform:none;width:82px;height:82px;border-radius:20px;background:var(--s3);color:var(--tx2);box-shadow:none;margin-bottom:14px;}
.ws-welcome-art i {font-size:36px!important;color:var(--tx2)!important;}
.ws-welcome h3 {font-weight:650;letter-spacing:-.8px;}
.ws-binary-card {border:1px solid var(--bd);border-radius:13px;box-shadow:none;}
.ws-binary-card>i {color:var(--tx2);background:var(--s3);border-radius:13px;}
.ws-trash-row {border-color:var(--bd);background:var(--s2);border-radius:8px;}

/* Admin, authentication and public landing all use the same typographic system. */
.admin-page {background:var(--s1);padding:43px clamp(25px,5vw,70px);}
.stat-card,[data-theme="dark"] .stat-card {border:1px solid var(--bd);box-shadow:none;border-radius:11px;background:var(--s2);padding:17px;}
.stat-card-val {font-family:var(--font);font-size:28px;letter-spacing:-1px;font-weight:680;color:var(--tx)!important;}
.stat-card-lbl {font-weight:620;font-size:10px;letter-spacing:.065em;}
.data-table-wrap,[data-theme="dark"] .data-table-wrap {background:var(--s1);border:1px solid var(--bd);border-radius:11px;box-shadow:none;}
[data-theme="dark"] thead th {background:var(--s2)!important;border-color:var(--bd)!important;}
[data-theme="dark"] tbody tr:hover {background:var(--s3)!important;}
.topbar-title {color:var(--tx)!important;font-weight:650;}
.login-body,[data-theme="dark"] .login-body {background:var(--bg);}
.login-page {padding:65px 20px;}
.login-card,[data-theme="dark"] .login-card {width:100%;max-width:414px;background:var(--s1);border:1px solid var(--bd);border-radius:19px;box-shadow:0 18px 55px rgba(0,0,0,.055);}
.login-header {padding:37px 35px 24px;border:0;}
.login-icon {width:49px;height:49px;border-radius:14px;margin-bottom:23px;font-size:18px;}
.login-title {font-weight:680;letter-spacing:-.9px;font-size:26px;}
.login-sub {max-width:290px;margin:7px auto 0;font-size:12px;line-height:1.6;}
.login-body-inner {padding:17px 35px 37px;}
.login-field {margin-bottom:15px;}
.login-input {height:43px;background:var(--s2);}
.login-btn {height:43px;background:var(--ac);border-radius:9px;font-size:13px;font-weight:630;margin-top:21px;}
.login-btn:hover {background:var(--ach);}
.login-back {background:transparent;border:0;border-radius:9px;font-size:12px;top:23px;left:30px;}
.login-back:hover {background:var(--s3);}
.land,[data-theme="dark"] .land {background:var(--s1);}
.l-nav,[data-theme="dark"] .l-nav {background:color-mix(in srgb,var(--s1) 92%,transparent);border-color:var(--bd);height:65px;padding:0 clamp(20px,5vw,70px);backdrop-filter:blur(20px);}
.l-logo-mark {width:31px;height:31px;font-size:12px;}
.l-logo-text {font-weight:680;}
.l-nav-btn {background:var(--tx);color:var(--s1);border-radius:9px;font-size:12px;font-weight:620;padding:9px 17px;}
.l-nav-btn:hover {background:var(--tx2);transform:none;}
.l-hero {padding:98px 24px 58px;max-width:850px;}
.l-hero-chip {background:var(--s2);border:1px solid var(--bd);border-radius:40px;color:var(--tx2);font-size:11px;font-weight:570;letter-spacing:.01em;padding:7px 15px;margin-bottom:23px;}
.l-hero-chip-dot {background:var(--gr);}
.l-hero h1 {color:var(--tx);font-size:clamp(43px,6.5vw,76px);line-height:1.08;font-weight:675;letter-spacing:-.055em;margin-bottom:21px;}
.l-hero h1 em {color:var(--tx);}
.l-hero-sub {font-size:16px;line-height:1.65;color:var(--tx2);margin-bottom:30px;max-width:545px;}
.l-btn-primary {border-radius:9px;background:var(--tx);color:var(--s1);font-size:13px;font-weight:620;padding:13px 24px;}
.l-btn-primary:hover {background:var(--tx2);transform:none;}
.l-btn-ghost {border:1px solid var(--bd2);border-radius:9px;font-size:13px;color:var(--tx);padding:13px 20px;}
.l-btn-ghost:hover {border-color:var(--bd2);background:var(--s3);color:var(--tx);}
.l-preview {max-width:1080px;padding:0 30px 84px;}
.l-code-win {border:1px solid var(--bd2);border-radius:15px;box-shadow:0 24px 75px rgba(0,0,0,.11);}
.l-code-bar {padding:13px 16px;}
.l-feat-icon {background:var(--s3)!important;color:var(--tx)!important;border:1px solid var(--bd);box-shadow:none!important;font-size:18px;}
.l-features {background:var(--s2);}

/* Responsive: controls do not overflow editor on small screens. */
@media (max-width:1100px) {
  .editor-workspace-label {display:none;}
  #bar {gap:5px;padding:0 9px;}
  #bar .btn {padding:0 8px;}
  .studio-sidebar {width:207px;flex-basis:207px;}
}
@media (max-width:820px) {
  .studio-sidebar {display:none;}
  .dashboard {padding:30px 23px 60px;}
  .pro-stats {gap:0;padding:18px 0;margin-bottom:31px;}
  .pro-stat {padding-right:16px;margin-right:16px;}
  .pro-stat-icon {display:none;}
  .pro-stat-value {font-size:16px;}
  .pro-toolbar {flex-wrap:wrap;}
  .pro-search {min-width:160px;max-width:none;}
  .pro-sort-label {display:none;}
  #left {width:215px;}
  #bar .editor-brand {display:none;}
  #bar .editor-project-name {max-width:115px;}
  #bar .btn:not(#runBtn) {padding:0 7px;}
  #bar .btn:not(#runBtn) i {font-size:12px;}
  .studio-explorer-footer {grid-template-columns:1fr;gap:3px;}
}
@media (max-width:610px) {
  .topbar {padding:0 14px;}
  .dashboard {padding:26px 15px 60px;}
  .dash-head {align-items:flex-start;gap:18px;margin-bottom:25px;}
  .dash-title {font-size:32px;}
  .dash-subtitle {max-width:250px;}
  .studio-create {padding:0 9px;font-size:0;height:34px;min-width:34px;justify-content:center;}
  .studio-create i {font-size:13px;}
  .pro-stats {display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0;}
  .pro-stat {padding:0;margin:0;border:0!important;}
  .pro-stat:last-child {grid-column:span 2;}
  .pro-stat:not(:last-child) {border:0!important;}
  .studio-section-head {margin-bottom:13px;}
  .pro-toolbar {gap:7px;}
  .pro-search {flex:1 1 100%;max-width:100%;}
  .pro-visible {margin-left:0;}
  .pro-sort {max-width:calc(100% - 100px);}
  .studio-view-switch {margin-left:auto;}
  .proj-grid[data-view="list"] .proj-card {padding:11px 9px;column-gap:9px;grid-template-columns:36px minmax(0,1fr) 25px;}
  .proj-grid[data-view="list"] .pc-icon {width:33px;height:33px;font-size:12px;}
  .proj-grid[data-view="list"] .pc-actions {display:none;}
  .proj-grid[data-view="list"] .pc-menu-btn {grid-column:3;}
  .proj-grid[data-view="list"] .pc-name {font-size:12px;}
  .pc-meta {flex-wrap:wrap;gap:5px 11px;}
  #bar {height:50px!important;padding:0 8px;gap:4px;}
  #bar .editor-project-name {max-width:112px;}
  #bar .editor-breadcrumb,#bar .editor-brand {display:none;}
  #bar .studio-symbol {width:25px;height:25px;}
  #bar #saveInd {font-size:0;margin:0;}
  #bar #saveInd:before {content:"●";font-size:11px;}
  #bar .btn:not(#runBtn) {font-size:0;padding:0 5px;min-width:27px;}
  #bar .btn i {font-size:11px;}
  #bar .btn-green {font-size:0;min-width:29px;}
  #left {width:166px;}
  .ws-explorer-head {padding:17px 9px 9px;}
  .ws-quick-actions {padding:0 7px 8px;}
  .ws-quick-actions button {font-size:0;}
  .ws-quick-actions button i {font-size:12px;}
  #left .file-search {margin:4px 7px 8px;padding:7px;}
  .ws-location {padding:8px 7px;}
  .ws-tree {padding:5px 3px!important;}
  .studio-explorer-footer {padding:6px;}
  .studio-explorer-footer .btn.w100 {font-size:0!important;}
  .studio-explorer-footer .btn.w100 i {font-size:12px;}
  .ws-asset-toolbar {padding:0 9px;}
  .ws-asset-buttons .btn {font-size:0;}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* Final alignment and keyboard controls */
.studio-admin-btn {color:var(--tx2)!important;background:transparent!important;border-color:var(--bd)!important;}
.studio-admin-btn:hover {background:var(--s3)!important;}
.studio-admin-bar .topbar-proj-cur {font-size:12px;color:var(--tx2);}
.studio-admin-bar .topbar-user {color:var(--tx);}
.studio-admin-bar .topbar-user:hover {background:var(--s3);}
.proj-grid[data-view="list"] .pc-actions .btn.f1 {flex:initial;}
[data-theme="dark"] .studio-sidebar {background:var(--sidebar);}
[data-theme="dark"] .studio-side-link.selected {background:var(--acd);}
[data-theme="dark"] .pro-stat-icon {background:var(--s3);}
[data-theme="dark"] .proj-grid[data-view="list"] {background:var(--s1);border-color:var(--bd);}
[data-theme="dark"] .proj-grid[data-view="list"] .proj-card:hover {background:var(--s2);}
[data-theme="dark"] .ws-asset-view,[data-theme="dark"] .ws-asset-toolbar,[data-theme="dark"] .ws-asset-details {background:var(--s1);}
[data-theme="dark"] .ws-root:hover,[data-theme="dark"] .ws-row:hover {background:var(--s3);}
[data-theme="dark"] .ws-welcome {background:var(--s1)!important;}
[data-theme="dark"] .ws-binary-card {background:var(--s2);}
@media(max-width:610px){.studio-admin-bar .topbar-divider,.studio-admin-bar .topbar-uname {display:none;}}

/* Fault-tolerant editing when the optional CodeMirror CDN is unavailable. */
#cm .ws-plain-editor {display:block;box-sizing:border-box;width:100%;height:100%;resize:none;
  padding:20px 24px;border:0;outline:0;background:var(--s1);color:var(--tx);
  font:13px/1.65 var(--mono,ui-monospace,monospace);tab-size:2;white-space:pre;overflow:auto;}

/* Reversible projects trash — macOS-like understated rows */
.studio-trash-link{border:0;text-align:left;width:100%;font:inherit;cursor:pointer;background:transparent}
.studio-trash-project{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--bd);padding:13px 2px}
.studio-trash-project:last-child{border-bottom:0}
.studio-trash-meta{display:flex;flex-direction:column;min-width:0;gap:4px}
.studio-trash-meta strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.studio-trash-meta small,.studio-trash-empty{color:var(--tx2);font-size:12px}


/* ===== WebIDE Studio v6 refresh ===== */
.section-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);}
.land-apple{min-height:100vh;background:radial-gradient(circle at top left, rgba(0,122,255,.08), transparent 26%), radial-gradient(circle at 85% 10%, rgba(52,199,89,.08), transparent 22%), var(--bg);}
.l-nav-apple{position:sticky;top:0;z-index:30;backdrop-filter:saturate(180%) blur(20px);background:color-mix(in srgb, var(--bg) 86%, transparent);border-bottom:1px solid color-mix(in srgb, var(--bd) 75%, transparent);}
.l-nav-apple .l-logo-mark{display:grid;place-items:center;font-size:13px;}
.l-nav-lnk{font-size:13px;color:var(--tx2);font-weight:530;}
.l-nav-lnk:hover{color:var(--tx);}
.l-hero-apple{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);align-items:center;gap:44px;max-width:1220px;padding:72px 40px 62px;text-align:left;}
.l-hero-copy{max-width:560px;}
.l-hero-apple h1{font-size:clamp(42px,6vw,74px);line-height:.98;letter-spacing:-.06em;margin:18px 0 16px;}
.l-hero-apple h1 em{font-style:normal;color:var(--tx);opacity:.78;}
.l-hero-apple .l-hero-sub{margin:0 0 28px;max-width:500px;font-size:17px;line-height:1.8;}
.l-hero-apple .l-hero-actions{justify-content:flex-start;}
.l-hero-stage{display:flex;justify-content:center;}
.hero-device{width:min(100%,590px);border:1px solid color-mix(in srgb, var(--bd) 80%, transparent);background:color-mix(in srgb, var(--s1) 84%, transparent);backdrop-filter:saturate(160%) blur(18px);box-shadow:0 32px 70px rgba(17,24,39,.12),0 2px 10px rgba(17,24,39,.06);border-radius:28px;overflow:hidden;}
.hero-device-bar{display:flex;align-items:center;gap:8px;padding:15px 18px;border-bottom:1px solid var(--bd);background:color-mix(in srgb, var(--s2) 88%, transparent);}
.hero-device-title{margin-left:auto;font-size:12px;color:var(--tx3);font-family:var(--mono);}
.hero-device-body{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:430px;}
.hero-sidebar{padding:16px 12px;border-right:1px solid var(--bd);background:color-mix(in srgb, var(--sidebar) 92%, transparent);display:flex;flex-direction:column;gap:7px;}
.hero-sidebar-group{display:flex;justify-content:space-between;align-items:center;padding:0 10px 10px;font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;}
.hero-sidebar-item{display:flex;align-items:center;gap:10px;height:37px;padding:0 11px;border-radius:11px;color:var(--tx2);font-size:13px;font-weight:560;}
.hero-sidebar-item.on{background:var(--acd);color:var(--ac);}
.hero-main{display:grid;grid-template-rows:1fr 1fr;gap:16px;padding:18px;}
.hero-window-card{border:1px solid var(--bd);border-radius:20px;background:var(--s1);overflow:hidden;box-shadow:var(--sh);}
.hero-window-card-head{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid var(--bd);font-size:12px;color:var(--tx3);font-weight:600;}
.hero-code-lines{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--tx2);}
.hero-code-lines b{color:var(--ac);font-weight:600;}
.hero-code-lines em{color:#d14;font-style:normal;}
.hero-preview-pane{padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px;justify-content:center;min-height:130px;}
.hero-preview-pane h3{font-size:21px;font-weight:680;letter-spacing:-.03em;}
.hero-preview-pane p{font-size:13px;color:var(--tx2);line-height:1.7;}
.hero-preview-badge{align-self:flex-start;background:var(--grd);color:var(--gr);border:1px solid var(--grb);padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;}
.hero-preview-actions{display:flex;flex-wrap:wrap;gap:8px;}
.hero-preview-actions span{padding:6px 10px;border-radius:999px;background:var(--s3);border:1px solid var(--bd);font-size:11px;font-weight:600;color:var(--tx2);}
.l-workflow,.l-features-apple{max-width:1220px;margin:0 auto;padding:32px 40px 80px;}
.l-workflow-head,.l-features-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:28px;align-items:end;margin-bottom:28px;}
.l-workflow-head h2,.l-features-intro h2{font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.055em;}
.l-workflow-head p,.l-features-intro p{font-size:14px;line-height:1.75;color:var(--tx2);}
.l-workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.l-flow-card{padding:26px 24px;background:color-mix(in srgb, var(--s1) 88%, transparent);border:1px solid var(--bd);border-radius:24px;box-shadow:var(--sh);}
.l-flow-index{font-family:var(--mono);font-size:12px;color:var(--ac);margin-bottom:26px;}
.l-flow-card h3{font-size:20px;font-weight:670;letter-spacing:-.03em;margin-bottom:10px;}
.l-flow-card p{font-size:13px;color:var(--tx2);line-height:1.75;}
.l-feat-grid-apple{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.l-feat-grid-apple .l-feat{border-radius:24px;padding:24px;background:color-mix(in srgb, var(--s1) 92%, transparent);box-shadow:var(--sh);}
.l-feat-grid-apple .l-feat:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(17,24,39,.09);}
.l-feat-grid-apple .l-feat-large{grid-column:span 1;background:linear-gradient(180deg,color-mix(in srgb, var(--acd) 45%, var(--s1)) 0%, var(--s1) 100%);}
.l-feat-grid-apple .l-feat h3{font-size:17px;letter-spacing:-.02em;}
.l-feat-grid-apple .l-feat p{font-size:13px;line-height:1.75;}
.l-footer-apple{max-width:1220px;margin:0 auto;padding:24px 40px 42px;border-top:1px solid var(--bd);background:transparent;}
.login-body-apple{background:radial-gradient(circle at top left, rgba(0,122,255,.08), transparent 28%), radial-gradient(circle at 80% 20%, rgba(52,199,89,.07), transparent 22%), var(--bg);}
.login-page-apple{padding:34px;}
.login-theme-toggle{position:fixed;top:20px;right:24px;width:40px;height:40px;border-radius:999px;border:1px solid var(--bd);background:color-mix(in srgb, var(--s1) 88%, transparent);color:var(--tx2);backdrop-filter:saturate(160%) blur(12px);}
.login-theme-toggle:hover{background:var(--s3);color:var(--tx);}
.login-shell{width:min(1080px,100%);display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,420px);gap:28px;align-items:stretch;}
.login-story,.login-card-apple{background:color-mix(in srgb, var(--s1) 90%, transparent);border:1px solid var(--bd);box-shadow:var(--shlg);backdrop-filter:saturate(160%) blur(18px);}
.login-story{border-radius:30px;padding:34px 34px 30px;display:flex;flex-direction:column;justify-content:space-between;}
.login-story-mark{width:54px;height:54px;border-radius:16px;background:var(--tx);color:var(--s1);display:grid;place-items:center;font-size:22px;margin-bottom:22px;}
.login-story-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-bottom:14px;}
.login-story h1{font-size:clamp(34px,5vw,52px);line-height:1.02;letter-spacing:-.06em;margin:0 0 16px;max-width:10ch;}
.login-story p{font-size:15px;line-height:1.85;color:var(--tx2);max-width:50ch;}
.login-story-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:34px 0 26px;}
.login-stat{padding:18px;border:1px solid var(--bd);border-radius:20px;background:var(--s1);}
.login-stat strong{display:block;font-size:28px;font-weight:680;letter-spacing:-.05em;}
.login-stat span{display:block;margin-top:4px;font-size:12px;color:var(--tx3);line-height:1.5;}
.login-story-list{display:flex;flex-direction:column;gap:10px;}
.login-story-item{display:flex;align-items:flex-start;gap:11px;font-size:13px;color:var(--tx2);line-height:1.6;}
.login-story-item i{color:var(--gr);margin-top:2px;}
.login-card-apple{border-radius:30px;overflow:hidden;align-self:center;}
.login-header-apple{padding:30px 30px 12px;border-bottom:1px solid var(--bd);text-align:left;}
.login-card-apple .login-title{font-size:26px;font-weight:690;letter-spacing:-.04em;}
.login-card-apple .login-sub{font-size:13px;color:var(--tx2);margin-top:6px;}
.login-form-modern{display:flex;flex-direction:column;gap:12px;}
.login-card-apple .login-body-inner{padding:22px 30px 28px;}
.login-card-apple .login-input{height:46px;border-radius:12px;padding:0 14px;background:var(--s2);}
.login-card-apple .login-btn{height:46px;border-radius:12px;margin-top:8px;font-weight:650;}
.login-footer-row{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
.login-inline-link{font-size:13px;color:var(--ac);text-decoration:none;}
.login-inline-link:hover{text-decoration:underline;}
.login-footer-note{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tx3);}
.login-hint{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--am);margin-top:8px;}
.dashboard-apple{padding-top:42px;}
.dash-head-apple{align-items:flex-end;margin-bottom:28px;}
.dash-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.studio-overview{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;margin-bottom:26px;}
.studio-overview-main{display:grid;gap:18px;}
.studio-overview-card{border:1px solid var(--bd);background:color-mix(in srgb, var(--s1) 92%, transparent);border-radius:24px;box-shadow:var(--sh);}
.studio-overview-featured{padding:28px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,color-mix(in srgb, var(--acd) 32%, var(--s1)) 0%, var(--s1) 100%);}
.studio-overview-featured h2{font-size:32px;line-height:1.02;letter-spacing:-.06em;}
.studio-overview-featured p{font-size:14px;color:var(--tx2);line-height:1.75;max-width:48ch;}
.studio-featured-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.studio-overview-metrics{padding:0 28px;}
.studio-overview-side{display:grid;gap:18px;align-content:start;}
.studio-quick-actions,.studio-hints-card{padding:24px;}
.studio-quick-actions{display:flex;flex-direction:column;gap:10px;}
.studio-quick-link{display:flex;align-items:center;gap:12px;min-height:45px;padding:0 14px;border:1px solid var(--bd);border-radius:14px;background:var(--s1);font-size:13px;font-weight:560;color:var(--tx);text-align:left;}
.studio-quick-link i{width:16px;text-align:center;color:var(--tx3);}
.studio-quick-link:hover{background:var(--s3);}
.studio-hint-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bd);font-size:13px;color:var(--tx2);}
.studio-hint-item:last-child{border-bottom:0;padding-bottom:0;}
.studio-hint-item kbd,.pro-search kbd{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;padding:0 8px;border-radius:8px;border:1px solid var(--bd2);background:var(--s1);font-family:var(--mono);font-size:11px;color:var(--tx2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.03);}
.studio-recent-strip{margin-bottom:26px;}
.studio-recent-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.studio-mini-card{display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--bd);border-radius:20px;background:color-mix(in srgb, var(--s1) 94%, transparent);box-shadow:var(--sh);color:var(--tx);}
.studio-mini-card:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(17,24,39,.08);}
.studio-mini-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--s3);color:var(--tx2);margin-bottom:8px;}
.studio-mini-card strong{font-size:15px;letter-spacing:-.02em;}
.studio-mini-card small{font-size:12px;color:var(--tx3);}
.studio-library-section{padding-top:2px;}
.studio-library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:52px 28px;border:1px dashed var(--bd2);border-radius:24px;background:color-mix(in srgb, var(--s1) 92%, transparent);}
.studio-library-empty-icon{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:var(--s3);color:var(--tx3);font-size:28px;margin-bottom:16px;}
.studio-library-empty h3{font-size:24px;letter-spacing:-.04em;margin-bottom:8px;}
.studio-library-empty p{max-width:42ch;color:var(--tx2);line-height:1.75;margin-bottom:18px;}
.studio-side-empty{padding:4px 13px;font-size:12px;color:var(--tx3);line-height:1.6;}
.pro-toolbar{padding:12px;border:1px solid var(--bd);border-radius:20px;background:color-mix(in srgb, var(--s1) 94%, transparent);box-shadow:var(--sh);}
.pro-search{flex:1;min-width:260px;height:46px;border:1px solid var(--bd);background:var(--s1);border-radius:14px;padding:0 14px;}
.pro-search input{font-size:13px;}
.pro-sort{height:42px;border-radius:12px;padding:0 12px;min-width:188px;border:1px solid var(--bd);background:var(--s1);}
.pro-visible{font-size:12px;color:var(--tx3);font-weight:600;min-width:62px;text-align:right;}
.studio-view-switch{background:var(--s3);padding:3px;border-radius:12px;}
.studio-view-button{width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--tx3);}
.studio-view-button[aria-pressed="true"]{background:var(--s1);color:var(--tx);box-shadow:var(--sh);}
.proj-grid[data-view="grid"]{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.proj-grid[data-view="list"]{display:flex;flex-direction:column;gap:12px;}
.proj-card{border:1px solid var(--bd);background:color-mix(in srgb, var(--s1) 94%, transparent);border-radius:22px;box-shadow:var(--sh);padding:18px;}
.proj-card:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(17,24,39,.08);}
.proj-grid[data-view="list"] .proj-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;}
.proj-grid[data-view="list"] .pc-top{margin-bottom:0;}
.proj-grid[data-view="grid"] .proj-card{display:flex;flex-direction:column;gap:16px;}
.proj-grid[data-view="grid"] .pc-top{margin-bottom:2px;}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pc-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--s3);color:var(--tx2);font-size:15px;}
.pc-summary{display:flex;flex-direction:column;gap:6px;min-width:0;}
.pc-name{font-size:16px;font-weight:670;letter-spacing:-.03em;color:var(--tx);}
.pc-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--tx3);}
.pc-meta span{display:inline-flex;align-items:center;gap:6px;}
.pc-actions{display:flex;align-items:center;gap:8px;}
.pc-menu-btn{width:36px;height:36px;border-radius:12px;border:1px solid var(--bd);background:var(--s1);color:var(--tx3);}
.pc-menu-btn:hover{background:var(--s3);color:var(--tx);}
.pc-dropdown{padding:7px;min-width:200px;right:0;top:calc(100% + 8px);}
.pcd-sep{height:1px;background:var(--bd);margin:6px 0;}
.pcd-danger{color:var(--re)!important;}
.pcd-danger i{color:var(--re)!important;}
@media (max-width: 1080px){
  .l-hero-apple,.login-shell,.studio-overview,.l-workflow-head,.l-features-intro{grid-template-columns:1fr;}
  .l-hero-copy{max-width:none;}
  .hero-device{width:min(100%,760px);}
  .login-story h1{max-width:none;}
  .studio-overview-side{grid-template-columns:repeat(2,minmax(0,1fr));}
  .studio-recent-cards{grid-template-columns:1fr;}
}
@media (max-width: 920px){
  .studio-sidebar{display:none;}
  .dashboard{padding:30px 18px 48px;}
  .topbar{padding:0 14px;}
  .dash-head-apple{align-items:flex-start;}
  .dash-head-actions{width:100%;}
  .pro-toolbar{flex-wrap:wrap;}
  .pro-visible{width:100%;text-align:left;}
  .proj-grid[data-view="list"] .proj-card{grid-template-columns:1fr;}
  .studio-overview-side{grid-template-columns:1fr;}
}
@media (max-width: 760px){
  .l-hero-apple,.l-workflow,.l-features-apple,.l-footer-apple{padding-left:20px;padding-right:20px;}
  .hero-device-body{grid-template-columns:1fr;}
  .hero-sidebar{display:none;}
  .l-workflow-grid,.l-feat-grid-apple{grid-template-columns:1fr;}
  .login-page-apple{padding:18px;}
  .login-back{position:static;margin-bottom:14px;}
  .login-theme-toggle{top:18px;right:18px;}
  .login-shell{width:100%;}
  .login-story,.login-card-apple{border-radius:24px;}
  .dash-title{font-size:36px;}
  .studio-overview-featured h2{font-size:26px;}
}