/* v1.0.291 — quiet precision layer shared by every tool surface. */
:root {
  --surface-0: color-mix(in srgb, var(--bg) 94%, var(--text) 6%);
  --surface-1: color-mix(in srgb, var(--bg-card) 94%, var(--accent) 6%);
  --surface-2: color-mix(in srgb, var(--bg-input) 90%, var(--accent) 10%);
  --line-soft: color-mix(in srgb, var(--border) 72%, transparent);
  --shadow-soft: 0 18px 50px rgb(0 0 0 / 12%);
}
html[data-skin^="studio_"] body { background: var(--surface-0); }
html[data-skin^="studio_"] .main-content { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding-inline: 24px; }
html[data-skin^="studio_"] .site-footer { margin-top: auto; border-top: 1px solid var(--line-soft); background: transparent; }
html[data-skin^="studio_"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 3%, transparent), transparent 36%); }
html body > .navbar { border-bottom: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); }
html body .navbar-brand-text { font-weight: 700; letter-spacing: -.025em; }
html body .navbar-brand-mark { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
html[data-skin^="studio_"] .card,
html[data-skin^="studio_"] .panel,
html[data-skin^="studio_"] .tool-workspace,
html[data-skin^="studio_"] .workspace-card,
html[data-skin^="studio_"] .file-login-card,
html[data-skin^="studio_"] .ai-chat-shell,
html[data-skin^="studio_"] .ai-resource-card { border-color: var(--line-soft); box-shadow: var(--shadow-soft); }
html[data-skin^="studio_"] :where(.btn,.btn-sm,.btn-back,.theme-toggle-btn) { transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
html[data-skin^="studio_"] :where(.btn,.btn-sm,.btn-back,.theme-toggle-btn):not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 16%, transparent); }
html[data-skin^="studio_"] :where(.btn,.btn-sm,.btn-back,.theme-toggle-btn):not(:disabled):active { transform: translateY(0); box-shadow: none; }
html[data-skin^="studio_"] :where(input.form-control, textarea.form-control, select.form-control, .form-control, .ai-chat-input-row textarea) { background: var(--surface-2); border-color: var(--line-soft); transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
html[data-skin^="studio_"] :where(input.form-control, textarea.form-control, select.form-control, .form-control, .ai-chat-input-row textarea):focus { background: var(--bg-input); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
html[data-skin^="studio_"] :where(.tool-page-header,.page-header) { border-bottom: 1px solid var(--line-soft); padding-bottom: 1rem; }
html[data-skin^="studio_"] :where(.tool-title,.page-title,h1,h2) { letter-spacing: -.025em; }
html[data-skin^="studio_"] :where(.status-box,.file-message,.notice,.alert) { border-radius: var(--ui-control-radius, 10px); }
html[data-skin^="studio_"] :where(table thead th) { background: var(--surface-2); color: var(--accent-text); }
html[data-skin^="studio_"] .file-login-card,
html[data-skin^="studio_"] .notes-login-card { width: min(100%, 34rem); margin: clamp(2rem, 8vh, 6rem) auto; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 18px; }
html[data-skin^="studio_"] .file-login-card .card-title,
html[data-skin^="studio_"] .notes-login-card .card-title { font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: -.04em; color: var(--text); }
html[data-skin^="studio_"] .file-login-card .file-login-tip,
html[data-skin^="studio_"] .notes-login-card .notes-login-tip { color: var(--text-muted); line-height: 1.75; }
html[data-skin^="studio_"] .file-login-form { display: grid; gap: .6rem; }
html[data-skin^="studio_"] .file-login-form .form-label { margin-top: .55rem; color: var(--text-muted); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
html[data-skin^="studio_"] .file-login-form .btn-primary { width: 100%; margin-top: .75rem; min-height: 3rem; font-size: 1rem; }
html[data-skin^="studio_"] :where(.tool-grid,.ai-resource-grid,.app-list,.notes-card-grid) { gap: 1rem; }
html[data-skin^="studio_"] :where(.tool-card,.app-list-card,.notes-card,.ai-resource-card) { border: 1px solid var(--line-soft); background: var(--surface-1); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
html[data-skin^="studio_"] :where(.tool-card,.app-list-card,.notes-card,.ai-resource-card):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); box-shadow: 0 14px 34px rgb(0 0 0 / 14%); }
html[data-skin^="studio_"] :where(.tool-card-title,.app-card-title,.notes-card-title) { letter-spacing: -.02em; }
html[data-skin^="studio_"] :where(.section-heading,.home-section-title) { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line-soft); padding-bottom: .75rem; }
html[data-skin^="studio_"] :where(.section-heading h2,.home-section-title h2) { margin: 0; }
html[data-skin^="studio_"] .skin-picker-menu { border-color: var(--line-soft); box-shadow: 0 18px 48px rgb(0 0 0 / 28%); }
@media (prefers-reduced-motion: reduce) { html[data-skin^="studio_"] :where(.btn,.btn-sm,.btn-back,.theme-toggle-btn) { transition: none; } }
@media (max-width: 700px) { html[data-skin^="studio_"] .main-content { width: 100%; padding-inline: 12px; } html[data-skin^="studio_"] .file-login-card, html[data-skin^="studio_"] .notes-login-card { margin-block: 1.25rem; padding: 1.25rem; border-radius: 14px; } }