/* Account space: the studio's white canvas, cool greys and coral accents. */
.avatar-dialog { max-width: 440px; }
.avatar-account,.avatar-help { margin: 0; font-size: 11px; color: #9298a5; line-height: 1.8; }
.avatar-preview-wrap { display: grid; place-items: center; padding: 26px; border-radius: 22px; background: #f6f7fa; }
.avatar-preview-wrap img { width: 112px; height: 112px; padding: 15px; border: 1px solid #e8eaf0; border-radius: 50%; background: #f0f1f5; object-fit: contain; }
.avatar-preview-wrap img.is-custom { padding: 0; object-fit: cover; background: white; }
.avatar-upload-actions { display: flex; justify-content: center; gap: 10px; }
body.auth-loading .app-shell, body.signed-out .app-shell, body.admin-mode .app-shell { display:none; }
body.auth-loading::after { content:'正在连接设计空间…'; position:fixed; inset:0; display:grid; place-items:center; color:#9297a5; background:#fff; }
.login-screen { min-height:100dvh; padding:52px 7vw; display:grid; grid-template-columns:1.1fr 1fr; gap:6vw; align-items:center; background:radial-gradient(ellipse at 15% 15%,#f0f1f6 0,transparent 55%),#fff; }
.login-screen[hidden],.admin-screen[hidden],[data-admin-panel][hidden] { display:none; }
.login-brand { position:absolute; top:44px; left:7vw; display:grid; gap:8px; }
.login-brand strong { font-size:24px; letter-spacing:-1px; }
.login-brand span { color:#999eac; font-size:10px; letter-spacing:3px; }
.login-intro h1 { font-size:clamp(32px,4vw,58px); line-height:1.35; letter-spacing:-2px; margin:20px 0; }
.login-intro>p:not(.eyebrow) { color:#8c91a0; line-height:1.9; }
.login-features { display:flex; gap:10px; flex-wrap:wrap; margin-top:36px; }
.login-features span { border:1px solid #e5e7ee; border-radius:24px; padding:10px 16px; font-size:12px; color:#747a89; }
.login-card { max-width:450px; width:100%; border:1px solid #e7e8ef; border-radius:32px; padding:36px; background:#ffffffeb; box-shadow:0 18px 60px #3e45570b; }
.login-card h2 { font-size:28px; margin:14px 0; }
.login-card>p:not(.eyebrow) { font-size:12px; color:#9398a6; line-height:1.7; margin-bottom:26px; }
.login-card label,.account-dialog label { display:grid; gap:10px; font-size:12px; color:#737987; margin-bottom:18px; }
.login-card input,.account-dialog input:not([type=checkbox]),.account-dialog select,.admin-table-toolbar input,.admin-library-tools input,.admin-library-tools select { width:100%; border:1px solid #e8eaf0; border-radius:14px; background:#f5f6f9; color:#20232b; padding:13px 15px; outline:none; font:inherit; }
.login-card input:focus,.account-dialog input:focus,.admin-library-tools input:focus,.admin-table-toolbar input:focus { border-color:#fc2850; box-shadow:0 0 0 3px #fc28500c; }
.login-card .confirm-button { width:100%; display:flex; justify-content:space-between; padding:15px 22px; margin-top:25px; }
.login-card small { display:block; text-align:center; color:#999eab; font-size:10px; margin-top:22px; line-height:1.6; }
.account-error { color:#e3294c!important; font-size:12px!important; line-height:1.6; }
.topbar-actions,.account-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.topbar-actions { justify-content:flex-end; }
.account-controls { color:#7f8492; font-size:11px; }
.account-controls .secondary-button { white-space:nowrap; padding:8px 13px; font-size:11px; }
.account-points { color:#f5234b; padding:6px 10px; background:#fff0f3; border-radius:16px; }
.account-points { border:0; font:inherit; white-space:nowrap; }
.account-points:hover { background:#ffe3e9; }
.account-identity { padding:7px 3px; border:0; background:transparent; color:inherit; font:inherit; white-space:nowrap; }
.account-identity:hover { color:#f5234b; }
.account-tool-help { color:#9399a7; font-size:11px; line-height:1.8; }
.usage-dialog { width:min(680px,calc(100vw - 32px)); }
.usage-filters { display:flex!important; flex-wrap:wrap; gap:10px!important; align-items:end; }
.usage-filters label { flex:1 1 130px; min-width:0; }
.usage-filters .studio-select-trigger { min-height:44px; padding:12px 15px; border:1px solid #e8eaf0; border-radius:14px; background:#f5f6f9; font-size:13px; }
.usage-filters .secondary-button { min-height:42px; }
.usage-status { font-size:11px; color:#828a9b; line-height:1.8; }
.usage-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.usage-metrics>div { background:#f6f7fa; border:1px solid #e9ebf1; border-radius:18px; padding:16px; min-width:0; }
.usage-metrics span { display:block; color:#8e95a4; font-size:11px; }
.usage-metrics strong { display:block; color:#20242d; font-size:30px; margin-top:10px; overflow-wrap:anywhere; }
.usage-metrics small { margin-top:5px; font-size:9px; }
.usage-table-wrap { max-height:260px; overflow:auto; margin-top:18px; }
.usage-table { border-collapse:collapse; width:100%; font-size:11px; text-align:left; }
.usage-table th { position:sticky; top:0; background:#f8f9fb; color:#9299a8; font-weight:400; }
.usage-table th,.usage-table td { padding:12px 10px; border-bottom:1px solid #e9ecf2; }
.usage-table td:not(:first-child),.usage-table th:not(:first-child) { text-align:right; }
@media(max-width:760px) {
  .topbar .account-controls { width:100%; justify-content:flex-end; gap:7px; }
  .account-controls button { min-height:36px; }
  .account-dialog { padding:22px 18px; border-radius:24px; }
  .account-dialog input:not([type=checkbox]),.account-dialog select { font-size:16px; min-width:0; }
  .usage-metrics { gap:6px; }
  .usage-metrics>div { padding:12px 8px; border-radius:14px; }
  .usage-metrics strong { font-size:24px; }
  .usage-filters .studio-select-trigger { font-size:16px; }
  .usage-metrics span { font-size:10px; }
  .password-dialog .account-form-actions { flex-wrap:wrap; }
  .password-dialog .confirm-button { flex:1; font-size:11px; }
}
.admin-screen { min-height:100dvh; display:grid; grid-template-columns:240px minmax(0,1fr); padding:18px; gap:28px; }
.admin-sidebar { background:#eff0f5; border-radius:30px; padding:28px 20px; display:flex; flex-direction:column; min-height:calc(100dvh - 36px); position:sticky; top:18px; align-self:start; }
.admin-sidebar .sidebar-brand { padding:4px 12px; }
.admin-sidebar-caption { font-size:11px; color:#9499a7; padding:36px 14px 8px; }
.admin-sidebar nav { display:grid; gap:10px; }
.admin-sidebar nav button { background:none; border:0; text-align:left; border-radius:15px; padding:15px; font-size:13px; color:#808695; display:flex; justify-content:space-between; }
.admin-sidebar nav button.active { background:#fff; color:#252932; }
.admin-sidebar nav span { font-size:10px; color:#a9aeb9; }
.admin-sidebar-foot { margin-top:auto; padding:60px 12px 5px; color:#9ba0ad; font-size:10px; }
.admin-main { padding:5px 24px 40px 0; min-width:0; }
.admin-topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 0 32px; }
.admin-topbar>strong { font-size:15px; }
.admin-page-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:22px 0 32px; }
.admin-page-heading h1 { font-size:clamp(26px,3vw,38px); margin:12px 0; letter-spacing:-1px; }
.admin-page-heading p:not(.eyebrow) { font-size:12px; color:#9499a6; line-height:1.8; }
.admin-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:25px; }
.admin-stat { border:1px solid #e8eaf0; background:#fafbfc; border-radius:22px; padding:22px; }
.admin-stat span { display:block; font-size:11px; color:#9298a5; }
.admin-stat strong { display:block; font-size:30px; margin-top:12px; }
.admin-table-panel { border:1px solid #e6e8ef; border-radius:24px; padding:20px; background:#fff; }
.admin-table-toolbar { display:flex; gap:12px; align-items:center; margin-bottom:20px; }
.admin-table-toolbar h2 { font-size:14px; margin-right:auto; white-space:nowrap; }
.admin-table-toolbar input { max-width:240px; font-size:11px; padding:10px 14px; }
.admin-table-scroll { overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:11px; text-align:left; min-width:670px; }
.admin-table th { color:#9a9fac; font-weight:400; padding:15px 10px; background:#f8f9fb; }
.admin-table td { padding:22px 10px; border-bottom:1px solid #eceef3; color:#747b8b; line-height:1.6; vertical-align:top; }
.admin-table strong { display:block; color:#2b2f38; font-size:12px; }
.admin-table small { display:block; color:#a0a5b1; }
.admin-table button { font-size:11px; padding:7px 12px; }
.admin-table .permission-tags { max-width:190px; display:flex; flex-wrap:wrap; gap:4px; }
.permission-tags span,.account-badge { display:inline-block; background:#f1f2f6; padding:3px 8px; border-radius:12px; font-size:10px; }
.account-badge.ok { background:#edf7f3; color:#389777; }
.account-badge.off { background:#fff0f3; color:#f32d51; }
.admin-rule { color:#9b9fad; font-size:10px; line-height:1.8; margin:18px 0 0; }
.admin-notice { font-size:12px; border-radius:15px; padding:13px 17px; background:#f3f5f9; color:#747c8b; }
.admin-notice.error { background:#fff1f3; color:#e42b50; }
.account-dialog { width:min(570px,calc(100vw - 32px)); max-height:90dvh; border:1px solid #e7e9f0; border-radius:30px; padding:28px; color:#242832; background:#fff; }
.account-dialog::backdrop { background:#20253530; backdrop-filter:blur(6px); }
.account-dialog form { display:grid; gap:15px; }
.account-dialog .settings-head { margin-bottom:10px; }
.account-dialog h2 { margin:0; font-size:23px; }
.account-dialog label { margin:0; }
.account-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.account-dialog fieldset { border:1px solid #e8eaf0; padding:18px; border-radius:18px; }
.account-dialog legend { font-size:12px; color:#555e70; padding:0 7px; }
.account-permissions #permissionFields { display:flex; flex-wrap:wrap; gap:13px 20px; }
.account-permissions label,.account-credit-settings label:has([type=checkbox]) { display:flex; align-items:center; gap:8px; }
.account-dialog input[type=checkbox] { accent-color:#ff254e; width:15px; height:15px; }
.account-dialog small { color:#9ba1ae; font-size:10px; line-height:1.7; display:block; margin-top:12px; }
#editPointsLabel { margin-top:14px; }
.account-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.admin-library-tools { display:flex; align-items:end; gap:20px; margin-bottom:25px; }
.admin-library-tools label { display:grid; gap:8px; color:#9298a5; font-size:11px; min-width:160px; }
.admin-library-tools input { max-width:340px; font-size:12px; }
.admin-shape-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.admin-shape-card { border:1px solid #e8eaf0; border-radius:22px; padding:12px; background:#fafbfc; }
.admin-shape-card img { display:block; width:100%; aspect-ratio:1.3; object-fit:contain; background:#fff; border-radius:14px; }
.admin-shape-card strong { display:block; font-weight:500; font-size:12px; margin:13px 3px; overflow-wrap:anywhere; }
.admin-shape-card>div { display:flex; gap:8px; justify-content:flex-end; }
.admin-shape-card>div { flex-wrap:wrap; }
.admin-shape-card .opening-action { flex:1 0 100%; text-align:center; }
.admin-shape-card .admin-image-preview { padding:0; width:100%; border:0; background:none; cursor:zoom-in; }
.admin-material-preview { max-height:46dvh; width:100%; object-fit:contain; border-radius:18px; background:#f7f8fa; }
.account-dialog label.admin-checkbox-label { display:flex; align-items:center; gap:10px; }
.opening-dialog { width:min(700px,calc(100vw - 32px)); }
.opening-previews { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.opening-previews figure { margin:0; padding:12px; background:#f7f8fa; border-radius:18px; }
.opening-previews figure[hidden] { display:none; }
.opening-previews img { width:100%; max-height:42dvh; object-fit:contain; border-radius:12px; }
.opening-previews figcaption { color:#8c94a5; font-size:11px; margin-top:10px; overflow-wrap:anywhere; }
.opening-confirm { padding:14px 18px; border-radius:15px; background:#fff0f3; color:#ef2c51; font-size:12px; line-height:1.8; }
.account-dialog>form>p { font-size:12px; color:#8c94a5; line-height:1.8; }
.admin-shape-card button { font-size:11px; padding:7px 12px; }
.shape-readonly .shape-tile-actions,.shape-readonly #uploadShapeButton { display:none; }
@media(max-width:1000px) { .topbar { align-items:flex-start; gap:12px; } .account-controls { gap:7px; } .admin-screen { grid-template-columns:190px minmax(0,1fr); gap:20px; } .admin-sidebar { padding:25px 12px; } .admin-main { padding-right:5px; } }
@media(max-width:760px) { .login-screen { display:flex; flex-direction:column; padding:120px 20px 30px; gap:30px; } .login-brand { top:28px; left:28px; } .login-intro { width:100%; max-width:450px; } .login-intro h1 { font-size:32px; } .login-intro>p:not(.eyebrow),.login-features { display:none; } .login-card { padding:26px; } .admin-screen { display:block; padding:14px; } .admin-sidebar { position:static; min-height:0; padding:20px; } .admin-sidebar-caption,.admin-sidebar-foot { display:none; } .admin-sidebar nav { display:flex; margin-top:20px; overflow:auto; } .admin-sidebar nav button { font-size:11px; white-space:nowrap; } .admin-sidebar nav span { display:none; } .admin-main { padding:12px 0; } .admin-page-heading { align-items:flex-start; } .admin-stats { gap:8px; } .admin-stat { padding:15px; } .admin-stat strong { font-size:24px; } .admin-table-panel { padding:12px; } .admin-table-toolbar { flex-wrap:wrap; } .admin-shape-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .topbar-actions { gap:7px; } #userIdentity { max-width:100px; overflow:hidden; text-overflow:ellipsis; } .account-form-grid { gap:10px; } }