@charset "UTF-8";
:root {
    --page:#f7f8fa;
    --surface:#fff;
    --surface-alt:#f9fafc;
    --ink:#1b2029;
    --muted:#8a919d;
    --line:#e9ecf1;
    --blue:#2463ff;
    --blue-soft:#edf3ff;
    --green:#13b881;
    --shadow:0 3px 15px #1d2c4910;
    --radius:13px;
    --sidebar-width:232px;
    color-scheme:light;
}

:root[data-theme=dark] {
    --page:#0c1326;
    --surface:#111b32;
    --surface-alt:#152039;
    --ink:#e4e9f4;
    --muted:#8895ae;
    --line:#243049;
    --blue:#4f7bff;
    --blue-soft:#1a2b52;
    --green:#21cf97;
    --shadow:0 3px 15px #00000015;
    color-scheme:dark;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
    font-size:14px;
    line-height:1.6;
    color:var(--ink);
    background:var(--page);
    -webkit-font-smoothing:antialiased;
}

a {
    color:inherit;
    text-decoration:none;
}

button,input,select,textarea {
    font:inherit;
}

button,a,input,select,textarea {
    touch-action:manipulation;
}

button {
    cursor:pointer;
}

svg.icon {
    flex-shrink:0;
    vertical-align:middle;
}

button:disabled {
    cursor:wait;
    opacity:.6;
}

img {
    max-width:100%;
    object-fit:cover;
}

h1,h2,h3,p {
    margin:0;
}

h1,h2,h3 {
    line-height:1.35;
}

h1 {
    font-size:30px;
    letter-spacing:-.9px;
    font-weight:740;
}

h2 {
    font-size:18px;
    font-weight:650;
}

h3 {
    font-size:15px;
}

strong {
    font-weight:630;
}

small,.small {
    font-size:12px;
}

code {
    font-family:"SFMono-Regular",Consolas,monospace;
    font-size:12px;
    color:var(--muted);
}

[hidden] {
    display:none!important;
}

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid #80a4ff;
    outline-offset:3px;
    border-radius:6px;
}

input[type=checkbox] {
    width:16px;
    height:16px;
    margin:0;
    accent-color:var(--blue);
    cursor:pointer;
}

form {
    margin:0;
}

.muted {
    color:var(--muted);
}

.row {
    display:flex;
    align-items:center;
    gap:12px;
}

.stack {
    display:flex;
    flex-direction:column;
    gap:20px;
}

.span-2 {
    grid-column:1/-1;
}

.eyebrow {
    color:var(--muted);
    font-size:10px;
    letter-spacing:2px;
    font-weight:650;
    margin-bottom:9px;
}

.badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 9px;
    border-radius:20px;
    font-size:11px;
    font-weight:550;
    white-space:nowrap;
    background:var(--surface-alt);
    color:var(--muted);
}

.badge::before {
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}

.badge.success {
    background:#13b88112;
    color:#0bab78;
}

.badge.warning {
    background:#ffa60014;
    color:#d99312;
}

.badge.danger,.badge.error {
    background:#f34b6112;
    color:#e34b62;
}

.badge.muted {
    background:var(--surface-alt);
    color:var(--muted);
}

.btn {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    min-height:40px;
    padding:9px 17px;
    border-radius:8px;
    border:1px solid transparent;
    white-space:nowrap;
    font-size:13px;
    font-weight:560;
    transition:background .2s,box-shadow .2s,transform .2s;
}

.btn:hover {
    transform:translateY(-1px);
}

.btn.primary {
    background:var(--blue);
    color:#fff;
    box-shadow:0 3px 6px #2463ff18;
}

.btn.primary:hover {
    background:#1451ee;
    box-shadow:0 4px 10px #2463ff25;
}

.btn.secondary {
    border-color:var(--line);
    background:var(--surface);
    color:var(--ink);
}

.btn.secondary:hover {
    border-color:#b9c6e0;
}

.btn.ghost {
    background:transparent;
    color:var(--muted);
}

.btn.danger {
    background:#ee485c;
    color:#fff;
}

.btn.small,.btn.btn-sm {
    min-height:32px;
    padding:6px 11px;
    font-size:12px;
}

.icon-btn {
    border:1px solid transparent;
    background:transparent;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:7px;
    color:var(--muted);
    padding:0;
    transition:background .2s,color .2s;
}

.icon-btn:hover {
    color:var(--blue);
    background:var(--blue-soft);
}

.icon-btn.danger:hover {
    color:#ed566b;
    background:#ed566b10;
}

.panel {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:24px;
}

.panel-heading {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:22px;
}

.panel-heading p {
    font-size:12px;
    margin-top:3px;
}

.section-icon {
    width:43px;
    height:43px;
    background:var(--blue-soft);
    color:var(--blue);
    display:grid;
    place-items:center;
    border-radius:11px;
}

.notice {
    display:flex;
    gap:10px;
    align-items:center;
    line-height:1.6;
    padding:12px 15px;
    background:var(--blue-soft);
    color:var(--blue);
    border:1px solid #2463ff20;
    border-radius:9px;
    font-size:13px;
    margin-bottom:20px;
}

.notice.error,.notice.danger {
    background:#ef476f0b;
    color:#de405a;
    border-color:#ef476f25;
}

.notice.success {
    background:#13b8810b;
    color:#0c9e70;
    border-color:#13b88125;
}

.notice.warning {
    color:#ab7a0d;
    background:#d9a90010;
    border-color:#d9a90025;
}

.notice .icon-btn {
    margin-left:auto;
}

.field {
    display:flex;
    flex-direction:column;
    gap:8px;
    text-align:left;
}

.field>span:first-child,.field>label {
    font-size:13px;
    font-weight:550;
}

.field small,.field .hint {
    font-weight:400;
    color:var(--muted);
    font-size:12px;
}

.input,textarea,select {
    width:100%;
    padding:11px 13px;
    min-height:43px;
    outline:none;
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--ink);
    background:var(--surface);
    transition:border .2s,box-shadow .2s;
}

input::placeholder,textarea::placeholder {
    color:#a4a9b2;
}

.input:focus,textarea:focus,select:focus,.input-wrap:focus-within {
    border-color:#6e95ff;
    box-shadow:0 0 0 3px #2463ff0b;
}

textarea {
    min-height:110px;
    resize:vertical;
}

select {
    cursor:pointer;
}

input[type=file] {
    font-size:12px;
}

input[type=file]::file-selector-button {
    border:1px solid var(--line);
    background:var(--surface-alt);
    border-radius:6px;
    padding:6px 12px;
    color:var(--ink);
    margin-right:10px;
    cursor:pointer;
}

.checkbox-label {
    display:inline-flex;
    gap:8px;
    align-items:center;
    font-size:13px;
    color:var(--muted);
    cursor:pointer;
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.form-actions {
    display:flex;
    gap:10px;
    justify-content:flex-end;
    padding-top:22px;
    border-top:1px solid var(--line);
    margin-top:26px;
}

.table-wrap {
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

.data-table {
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    text-align:left;
}

.data-table th {
    font-size:11px;
    font-weight:550;
    color:var(--muted);
    white-space:nowrap;
    padding:14px 18px;
    background:var(--surface-alt);
    border-bottom:1px solid var(--line);
    letter-spacing:.2px;
}

.data-table td {
    padding:19px 18px;
    border-bottom:1px solid var(--line);
    white-space:nowrap;
    color:var(--ink);
}

.data-table tbody tr:last-child td {
    border-bottom:0;
}

.data-table tbody tr:hover {
    background:var(--surface-alt);
}

.data-table .card-name {
    display:flex;
    align-items:center;
    gap:11px;
    min-width:205px;
    white-space:normal;
}

.card-name>img,.card-thumb {
    width:40px;
    height:40px;
    border-radius:10px;
    object-fit:cover;
    flex-shrink:0;
}

.card-name .card-placeholder {
    width:40px;
    height:40px;
    border-radius:10px;
    background:var(--blue-soft);
    color:var(--blue);
    display:grid;
    place-items:center;
    flex-shrink:0;
}

.card-name strong {
    display:block;
    font-size:13px;
    margin-bottom:2px;
    max-width:230px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.card-name code {
    font-size:11px;
}

.card-code {
    color:#8290dc;
    font-size:11px;
    font-weight:600;
}

.action-buttons {
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.action-buttons form {
    display:inline-flex;
}

.action-buttons .icon-btn {
    width:29px;
    height:29px;
    border:1px solid var(--line);
    color:#818bc4;
}

.action-buttons .icon-btn svg {
    width:14px;
    height:14px;
}

.action-buttons .icon-btn:hover {
    color:var(--blue);
    border-color:#9bb5ff;
}

.action-buttons .icon-btn.danger {
    color:#ef6579;
}

.empty-state {
    text-align:center;
    padding:66px 24px;
}

.empty-state>svg,.empty-state .empty-icon {
    color:#99aed2;
    margin-bottom:18px;
}

.empty-state h2,.empty-state h3 {
    margin-bottom:9px;
    font-size:17px;
}

.empty-state p {
    color:var(--muted);
    font-size:13px;
    margin-bottom:22px;
    max-width:460px;
    margin-left:auto;
    margin-right:auto;
}

.pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:22px;
    font-size:12px;
    color:var(--muted);
}

.pagination .row {
    gap:6px;
}

.pagination a,.pagination span.current {
    padding:5px 11px;
    border-radius:6px;
}

.pagination .current {
    background:var(--blue);
    color:#fff;
}

.pagination a:hover {
    background:var(--surface-alt);
}

.toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}

.toolbar form {
    display:flex;
    gap:10px;
    align-items:center;
}

.toolbar .input {
    min-height:36px;
    padding:8px 12px;
    font-size:12px;
    max-width:280px;
}

.toolbar select.input {
    width:auto;
}

.tabs {
    display:flex;
    gap:3px;
    background:var(--line);
    padding:3px;
    border-radius:8px;
    width:max-content;
}

.tabs a,.tabs button {
    background:transparent;
    border:0;
    color:var(--muted);
    font-size:12px;
    padding:7px 17px;
    border-radius:6px;
    white-space:nowrap;
}

.tabs .active {
    color:#fff;
    background:#252a35;
    box-shadow:0 2px 4px #00000010;
}

.search-wrap {
    position:relative;
}

.search-wrap .icon {
    position:absolute;
    top:10px;
    left:12px;
    color:var(--muted);
}

.search-wrap .input {
    padding-left:37px;
}

/* Workspace */
.sidebar {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:var(--sidebar-width);
    background:linear-gradient(165deg,#20242d 0%,#151b28 65%,#111827 100%);
    color:#a7acb8;
    display:flex;
    flex-direction:column;
    z-index:40;
    padding:28px 15px 0;
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:20px;
    font-weight:700;
    letter-spacing:.4px;
}

.brand-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(140deg,#282d34,#171a21);
    color:white;
    width:43px;
    height:43px;
    border-radius:12px;
    box-shadow:inset 0 1px 2px #ffffff14;
}

.sidebar .brand {
    color:#fff;
    font-size:20px;
    padding:0 9px;
    gap:10px;
}

.sidebar .brand-icon {
    background:#fff;
    color:#252a35;
    width:36px;
    height:36px;
    border-radius:10px;
    box-shadow:0 2px 8px #00000015;
}

.sidebar .brand span:last-child {
    white-space:nowrap;
    font-size:19px;
}

.workspace-label {
    font-size:10px;
    margin:29px 12px 8px;
    color:#757d90;
    letter-spacing:1px;
}

.workspace-select {
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 8px 26px;
    border:1px solid #ffffff16;
    border-radius:8px;
    font-size:12px;
    color:#e8e9ed;
    padding:10px 12px;
}

.workspace-select svg {
    margin-left:auto;
    color:#858b9b;
}

.workspace-dot {
    width:6px;
    height:6px;
    background:#89aaff;
    border-radius:50%;
    box-shadow:0 0 0 3px #ffffff0b;
}

.main-nav {
    display:flex;
    flex-direction:column;
    gap:4px;
    overflow:auto;
}

.nav-item {
    display:flex;
    gap:13px;
    align-items:center;
    position:relative;
    border-radius:8px;
    min-height:45px;
    padding:11px 15px;
    font-size:13px;
    font-weight:470;
    color:#9099ac;
    transition:background .15s,color .15s;
}

.nav-item:hover {
    color:#f1f4fc;
    background:#ffffff06;
}

.nav-item.active {
    background:#ffffff0c;
    color:#fff;
    font-weight:600;
}

.nav-item.active::before {
    content:"";
    width:3px;
    height:24px;
    background:#4a7aff;
    border-radius:2px;
    position:absolute;
    left:0;
    box-shadow:0 0 10px #4a7aff25;
}

.nav-item.active svg {
    color:#96b2ff;
}

.nav-shortcut {
    margin-left:auto;
    opacity:.4;
    font-size:15px;
}

.sidebar-bottom {
    margin-top:auto;
    padding:15px 8px 0;
}

.sidebar-bottom>.nav-item {
    border-top:1px solid #ffffff0b;
    border-radius:0;
    padding:16px 7px;
    margin-bottom:2px;
}

.sidebar-bottom>.nav-item>.icon:last-child {
    margin-left:auto;
    opacity:.4;
}

.sidebar-profile {
    display:flex;
    gap:11px;
    align-items:center;
    border-top:1px solid #ffffff0b;
    margin-top:5px;
    padding:19px 0 22px;
}

.avatar {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(130deg,#eaedf5,#aebbd6);
    color:#25354f;
    font-size:14px;
    font-weight:600;
    flex-shrink:0;
}

.profile-copy {
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
}

.profile-copy strong {
    color:#e6eaf2;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.profile-copy small {
    font-size:10px;
    color:#707e95;
    margin-top:2px;
}

.sidebar-profile>.icon {
    color:#63738b;
}

.workspace-main {
    margin-left:var(--sidebar-width);
    min-height:100vh;
}

.topbar {
    height:72px;
    margin:0 34px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.breadcrumb {
    display:flex;
    align-items:center;
    gap:13px;
    color:var(--muted);
    font-size:12px;
}

.breadcrumb strong {
    color:var(--ink);
    font-weight:550;
}

.breadcrumb-slash {
    color:#b4bbc6;
    font-size:13px;
}

.topbar-actions {
    display:flex;
    align-items:center;
    gap:12px;
}

.workspace-live {
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--muted);
    font-size:10px;
    margin-right:12px;
}

.workspace-live i {
    display:inline-block;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#13b881;
}

.topbar-divider {
    height:22px;
    width:1px;
    background:var(--line);
}

.avatar-small {
    width:30px;
    height:30px;
    background:#232935;
    color:#fff;
    font-size:11px;
}

.notification-btn svg {
    width:19px;
}

.mobile-menu {
    display:none;
}

.main-content {
    padding:30px 34px 0;
    max-width:1700px;
    margin:auto;
}

.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:27px;
}

.page-heading h1 {
    display:flex;
    gap:12px;
    align-items:center;
}

.page-heading p {
    font-size:13px;
    color:var(--muted);
    margin-top:8px;
}

.page-heading .count {
    font-size:15px;
    font-weight:500;
    color:#767e8b;
    background:var(--line);
    border-radius:22px;
    padding:2px 11px;
    letter-spacing:0;
}

.page-heading>.row {
    gap:10px;
}

.stat-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px;
    margin-bottom:28px;
}

.stat-card {
    padding:21px 23px;
    position:relative;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.stat-label {
    font-size:11px;
    color:var(--muted);
    margin-bottom:12px;
}

.stat-value {
    font-size:28px;
    font-weight:650;
    letter-spacing:-1px;
    line-height:1.3;
}

.stat-card>svg {
    position:absolute;
    right:21px;
    top:22px;
    color:var(--blue);
}

.stat-card small,.stat-meta {
    font-size:11px;
    color:var(--muted);
    display:block;
    margin-top:10px;
}

.stat-card .stat-icon {
    position:absolute;
    right:20px;
    top:20px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:var(--blue-soft);
    color:var(--blue);
}

.workspace-footer {
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--line);
    margin-top:36px;
    padding:20px 0 24px;
    color:#a0a8b4;
    font-size:10px;
}

.sidebar-backdrop {
    display:none;
}

.card-list-panel {
    padding:0;
    overflow:hidden;
}

.summary-strip {
    display:flex;
    gap:25px;
    align-items:center;
    margin-bottom:22px;
    color:var(--muted);
    font-size:12px;
}

.summary-strip strong {
    color:var(--ink);
    font-size:14px;
    margin-left:7px;
}

.summary-strip span+span {
    padding-left:25px;
    border-left:1px solid var(--line);
}

/* Templates and assets */
.template-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.template-card {
    border:1px solid var(--line);
    border-radius:13px;
    overflow:hidden;
    background:var(--surface);
    box-shadow:var(--shadow);
    transition:transform .2s,border .2s;
}

.template-card:hover {
    transform:translateY(-3px);
    border-color:#b2c5f0;
}

.template-art {
    aspect-ratio:1.79;
    position:relative;
    overflow:hidden;
    background-color:#eae8e3;
    background-size:cover;
    background-position:center;
    color:#1f232b;
}

.template-art.theme-silver {
    background-image:url('../artwork/silver.svg');
    background-position:65% 40%;
}

.template-art.theme-blue {
    background-image:url('../artwork/blue.svg');
}

.template-art.theme-noir {
    background-image:url('../artwork/noir.svg');
    color:#fff;
}

.template-art.theme-sand {
    background-image:url('../artwork/sand.svg');
}

.template-art.theme-event {
    background-image:url('../artwork/event.svg');
}

.template-art.theme-steel {
    background-image:url('../artwork/steel.svg');
}

.template-art .template-logo {
    position:absolute;
    top:18px;
    left:21px;
}

.template-art .template-copy {
    position:absolute;
    left:24px;
    bottom:40px;
    max-width:58%;
}

.template-art h3 {
    font-family:Georgia,"Songti SC","SimSun",serif;
    font-weight:600;
    font-size:21px;
    line-height:1.5;
    letter-spacing:.5px;
}

.template-art p {
    font-size:10px;
    opacity:.65;
    margin-top:4px;
}

.template-art .template-qr {
    position:absolute;
    bottom:22px;
    right:21px;
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    background:#fffffff5;
    border-radius:5px;
    color:#252a35;
}

.template-body {
    padding:16px 20px;
}

.template-body h3 {
    font-size:14px;
    margin-bottom:5px;
}

.template-body p {
    font-size:12px;
    color:var(--muted);
}

.template-body .row {
    justify-content:space-between;
    margin-top:13px;
}

.template-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.template-card .template-actions {
    padding:0 20px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.material-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.material-card {
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
    overflow:hidden;
    box-shadow:var(--shadow);
}

.material-card>img,.material-preview {
    height:185px;
    width:100%;
    object-fit:contain;
    padding:22px;
    background:linear-gradient(135deg,var(--surface-alt),var(--surface));
}

.material-card>.material-body {
    padding:13px 16px;
}

.material-card h3 {
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.material-card .row {
    justify-content:space-between;
}

.upload-panel {
    margin-bottom:24px;
}

.upload-zone {
    border:1px dashed #bdc8dc;
    border-radius:11px;
    text-align:center;
    padding:26px;
    background:var(--surface-alt);
}

.upload-zone .icon {
    color:var(--blue);
    margin-bottom:8px;
}

.upload-zone p {
    color:var(--muted);
    font-size:12px;
}

.upload-zone input {
    margin-top:14px;
    max-width:340px;
}

.dashboard-grid {
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:22px;
}

.welcome-panel {
    position:relative;
    overflow:hidden;
    padding:30px;
    background:linear-gradient(120deg,var(--surface),var(--blue-soft));
}

.welcome-panel h2 {
    font-size:23px;
    max-width:65%;
}

.welcome-panel p {
    margin-top:10px;
    max-width:60%;
    color:var(--muted);
}

.welcome-panel .btn {
    margin-top:24px;
}

.welcome-art {
    position:absolute;
    right:-30px;
    top:-35px;
    bottom:-10px;
    width:45%;
    background:url('../artwork/blue.svg') 70% center/cover;
    opacity:.8;
    mask-image:linear-gradient(to right,transparent,#000 40%);
}

.quick-link {
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px 0;
    border-bottom:1px solid var(--line);
}

.quick-link:last-child {
    border-bottom:0;
}

.quick-link>svg:first-child {
    color:var(--blue);
}

.quick-link>svg:last-child {
    margin-left:auto;
    color:var(--muted);
}

.quick-link p {
    font-size:11px;
    color:var(--muted);
    margin-top:3px;
}

.quick-link strong {
    font-size:13px;
}

.chart-bars {
    height:210px;
    display:flex;
    align-items:flex-end;
    justify-content:space-around;
    gap:8px;
    padding:18px 4px 25px;
    border-bottom:1px solid var(--line);
    margin-top:20px;
}

.chart-bar {
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    flex:1;
    height:100%;
    max-width:58px;
}

.chart-bar .bar {
    width:68%;
    background:linear-gradient(#4b80ff,#b5ceff);
    border-radius:4px 4px 0 0;
    min-height:2px;
}

.chart-bar span,.chart-bar small {
    position:absolute;
    bottom:-25px;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    font-size:10px;
    color:var(--muted);
}

.chart-bar .bar-value {
    bottom:auto;
    font-size:10px;
    color:var(--blue);
}

.announcement {
    padding:20px 0;
    border-bottom:1px solid var(--line);
}

.announcement:first-child {
    padding-top:0;
}

.announcement:last-child {
    border-bottom:0;
    padding-bottom:0;
}

.announcement h3 {
    margin-bottom:8px;
}

.announcement .body {
    white-space:pre-wrap;
    color:var(--muted);
    font-size:13px;
    line-height:1.9;
}

.announcement time {
    font-size:11px;
    color:var(--muted);
}

.settings-section+.settings-section {
    border-top:1px solid var(--line);
    padding-top:26px;
    margin-top:26px;
}

.settings-section>h2 {
    margin-bottom:7px;
}

.settings-section>p {
    color:var(--muted);
    font-size:12px;
    margin-bottom:21px;
}

.account-panel {
    max-width:700px;
}

.account-panel .stack {
    max-width:460px;
}

.account-logout {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:32px;
    border-top:1px solid var(--line);
    padding-top:24px;
}

.account-logout p {
    font-size:12px;
    margin-top:4px;
}

/* Authentication */
.auth-page {
    background:#f8f7f5;
    color:#20242a;
    min-height:100vh;
    position:relative;
    isolation:isolate;
    color-scheme:light;
}

.auth-header {
    position:absolute;
    top:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:27px 4.2%;
    z-index:3;
}

.auth-header nav {
    display:flex;
    gap:35px;
    font-size:12px;
}

.auth-header nav a:hover {
    color:#2463ff;
}

.auth-background {
    position:fixed;
    inset:0;
    background:url('../artwork/silver.svg') center/cover;
    z-index:-2;
}

.auth-main {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:95px 24px 95px;
}

.auth-card {
    position:relative;
    width:420px;
    max-width:100%;
    background:#ffffffed;
    border:1px solid #fff;
    border-radius:21px;
    padding:39px 30px 29px;
    box-shadow:0 25px 60px #2625261a,0 3px 8px #00000005;
    backdrop-filter:blur(24px);
    text-align:center;
    z-index:1;
}

.auth-card-logo {
    width:53px;
    height:53px;
    border-radius:13px;
    margin-bottom:19px;
}

.auth-title h1 {
    font-size:25px;
    letter-spacing:.4px;
    line-height:1.5;
}

.auth-title p {
    font-size:13px;
    color:#8a8d92;
    margin-top:5px;
}

.login-method {
    font-size:13px;
    font-weight:600;
    line-height:37px;
    background:#f4f4f5;
    border:1px solid #e9eaec;
    border-radius:8px;
    color:#44474d;
    margin-top:25px;
    margin-bottom:18px;
}

.auth-form {
    display:flex;
    flex-direction:column;
    gap:18px;
}

.auth-card .input,.auth-card select {
    background:#ffffffa0;
    border-color:#dedfe3;
    color:#2d3037;
}

.auth-card .field>span:first-child {
    font-size:12px;
    font-weight:500;
}

.input-wrap {
    display:flex;
    align-items:center;
    border:1px solid #dedfe3;
    border-radius:9px;
    height:46px;
    padding:0 13px;
    gap:13px;
    background:#ffffff70;
    transition:border .2s,box-shadow .2s;
}

.input-wrap>.icon {
    width:18px;
    height:18px;
    color:#484d55;
}

.input-wrap input {
    min-width:0;
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#2d3037;
    font-size:13px;
    height:100%;
}

.password-toggle {
    padding:0;
    border:0;
    background:transparent;
    display:grid;
    place-items:center;
    color:#9498a0;
    width:24px;
    height:24px;
}

.password-toggle .icon {
    width:18px;
    height:18px;
}

.password-toggle.revealed {
    color:#2463ff;
}

.auth-options {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#93979e;
    font-size:11px;
    margin-top:-2px;
}

.auth-options .checkbox-label {
    font-size:11px;
    color:#93979e;
}

.auth-options input {
    width:15px;
    height:15px;
}

.auth-options a:hover {
    color:#2463ff;
}

.login-submit {
    width:100%;
    min-height:46px;
    background:#2463ff!important;
    color:#fff;
    font-size:14px;
    border-radius:9px;
    letter-spacing:2px;
}

.auth-register {
    font-size:12px;
    margin-top:20px;
    color:#5c6067;
}

.auth-register a {
    font-weight:650;
    color:#242830;
    margin-left:5px;
}

.auth-register a:hover {
    color:#2463ff;
}

.auth-legal {
    color:#9a9da3;
    font-size:10px;
    margin-top:26px;
    line-height:1.8;
}

.auth-slogan {
    position:fixed;
    bottom:69px;
    left:4.2%;
    z-index:-1;
}

.auth-slogan p {
    font-family:Georgia,"Songti SC","SimSun",serif;
    font-size:35px;
    line-height:1.5;
    letter-spacing:1.5px;
    color:#2e3138;
}

.auth-slogan span {
    color:#8d8e92;
    font-size:11px;
    letter-spacing:1px;
    display:block;
    margin-top:9px;
}

.auth-footer {
    position:absolute;
    bottom:22px;
    left:0;
    right:0;
    text-align:center;
    font-size:10px;
    color:#969ba3;
}

.register-card {
    width:495px;
    padding:28px 30px;
}

.register-card .auth-card-logo {
    width:43px;
    height:43px;
    margin-bottom:10px;
}

.register-card .auth-title {
    margin-bottom:22px;
}

.register-card .auth-title h1 {
    font-size:23px;
}

.register-card .auth-form {
    gap:14px;
}

.register-card .form-grid {
    gap:14px;
}

.register-card .input {
    font-size:12px;
}

.register-card .auth-register {
    margin-top:15px;
}

.installer-card {
    width:650px;
    padding:28px 32px;
}

.installer-card .auth-card-logo {
    width:43px;
    height:43px;
    margin-bottom:10px;
}

.installer-card .auth-title {
    margin-bottom:27px;
}

.installer-card .auth-title h1 {
    font-size:24px;
}

.installer-card .auth-title .eyebrow {
    color:#9fa3aa;
    font-size:9px;
    margin-bottom:5px;
}

.installer-form {
    gap:17px;
}

.installer-form .form-grid {
    gap:17px;
}

.installer-form .input {
    font-size:12px;
    padding:9px 11px;
    min-height:39px;
}

.install-section-title {
    display:flex;
    gap:10px;
    align-items:center;
    border-top:1px solid #eceef1;
    padding-top:18px;
}

.install-section-title:first-child {
    border:0;
    padding:0;
}

.install-section-title>span {
    font-size:10px;
    letter-spacing:1px;
    color:#2463ff;
    background:#edf3ff;
    width:26px;
    height:26px;
    border-radius:7px;
    display:grid;
    place-items:center;
}

.install-section-title h2 {
    font-size:14px;
}

.install-note {
    font-size:10px;
    line-height:1.8;
    color:#9298a2;
}

.auth-card .notice {
    font-size:12px;
    text-align:left;
    margin-bottom:15px;
}

.auth-page:has(.installer-card) .auth-main {
    padding-top:100px;
    padding-bottom:65px;
}

.auth-page:has(.installer-card) .auth-slogan {
    display:none;
}

/* Dialogs and messages */
.toast {
    position:fixed;
    bottom:32px;
    left:50%;
    transform:translate(-50%,15px);
    max-width:calc(100vw - 32px);
    padding:13px 22px;
    border-radius:10px;
    background:#252f43;
    color:#fff;
    font-size:13px;
    box-shadow:0 10px 30px #0000001a;
    opacity:0;
    visibility:hidden;
    transition:opacity .2s,transform .2s;
    z-index:100;
    white-space:normal;
}

.toast.visible {
    visibility:visible;
    opacity:1;
    transform:translate(-50%,0);
}

.toast.error {
    background:#b63d53;
}

dialog {
    background:var(--surface);
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:17px;
    box-shadow:0 25px 80px #00000020;
    padding:30px;
    width:400px;
    max-width:calc(100vw - 32px);
}

dialog::backdrop {
    background:#101b3980;
    backdrop-filter:blur(3px);
}

.confirm-dialog h2 {
    margin-bottom:9px;
}

.confirm-dialog p {
    font-size:13px;
    color:var(--muted);
}

.confirm-icon {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    background:#ef657411;
    color:#ee526c;
    border-radius:13px;
    margin-bottom:20px;
}

.qr-dialog {
    text-align:center;
}

.qr-dialog img {
    display:block;
    margin:20px auto;
    object-fit:contain;
}

.qr-dialog p {
    font-size:12px;
    margin-top:7px;
}

.dialog-close {
    position:absolute;
    right:11px;
    top:11px;
}

/* Help */
.public-document {
    background:#f7f8fa;
    min-height:100vh;
    position:relative;
    padding-bottom:60px;
}

.document-header {
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px 30px;
}

.document-content {
    max-width:1200px;
    margin:15px auto;
    padding:0 30px 40px;
}

.help-hero {
    padding:70px 35px;
    position:relative;
    isolation:isolate;
    border-radius:20px;
    overflow:hidden;
    background:#f2f3f5;
}

.help-hero h1 {
    font-size:43px;
    line-height:1.4;
    letter-spacing:.5px;
}

.help-hero p {
    color:#7c838e;
    line-height:1.9;
    margin-top:17px;
    font-size:13px;
}

.help-hero .btn {
    margin-top:25px;
}

.help-art {
    position:absolute;
    inset:0;
    background:url('../artwork/silver.svg') 70% center/cover;
    z-index:-1;
    mask-image:linear-gradient(to right,transparent 25%,#000 75%);
}

.help-features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin:25px 0;
}

.help-features .icon {
    color:#2463ff;
    margin-bottom:18px;
}

.help-features h2 {
    font-size:16px;
    margin-bottom:10px;
}

.help-features p {
    font-size:12px;
    color:#848c98;
    line-height:1.9;
}

.help-questions {
    padding:30px;
}

.help-questions h2 {
    font-size:23px;
    margin-bottom:24px;
}

.help-questions details {
    padding:16px 0;
    border-bottom:1px solid var(--line);
}

.help-questions details:last-child {
    border:0;
}

.help-questions summary {
    cursor:pointer;
    font-size:13px;
    font-weight:600;
}

.help-questions p {
    font-size:12px;
    line-height:2;
    color:var(--muted);
    margin-top:13px;
}

@media(min-width:1600px) {
    :root {
        --sidebar-width:260px;
    }
    .sidebar {
        padding-top:34px;
    }
    .main-content {
        padding-top:37px;
    }
    .topbar {
        height:78px;
    }
    .page-heading h1 {
        font-size:33px;
    }
    .nav-item {
        min-height:49px;
    }
    .auth-card {
        width:460px;
        padding:42px 32px 31px;
    }
    .auth-title h1 {
        font-size:28px;
    }
    .auth-main {
        padding-top:120px;
        padding-bottom:100px;
    }
    .register-card {
        width:510px;
    }
    .installer-card {
        width:650px;
    }
    .template-art h3 {
        font-size:25px;
    }
}

@media(max-width:1250px) {
    :root {
        --sidebar-width:210px;
    }
    .sidebar {
        padding-left:10px;
        padding-right:10px;
    }
    .sidebar .brand span:last-child {
        font-size:17px;
    }
    .topbar {
        margin:0 25px;
    }
    .main-content {
        padding:27px 25px 0;
    }
    .template-grid {
        gap:17px;
    }
    .template-art h3 {
        font-size:18px;
    }
    .template-art .template-copy {
        left:17px;
        bottom:29px;
    }
    .template-art .template-logo {
        top:14px;
        left:17px;
    }
    .template-art .template-qr {
        width:40px;
        height:40px;
        bottom:17px;
        right:17px;
    }
    .material-grid {
        grid-template-columns:repeat(3,1fr);
    }
    .action-buttons {
        gap:4px;
    }
    .data-table td,.data-table th {
        padding-left:13px;
        padding-right:13px;
    }
    .workspace-live {
        display:none;
    }
}

@media(max-width:1000px) {
    .template-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .stat-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .toolbar {
        align-items:stretch;
        flex-wrap:wrap;
        gap:12px;
    }
    .toolbar form {
        flex:1;
        justify-content:flex-end;
    }
    .material-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .dashboard-grid {
        grid-template-columns:1fr;
    }
    .auth-slogan {
        bottom:70px;
    }
    .auth-slogan p {
        font-size:26px;
    }
    .auth-slogan span {
        max-width:200px;
        font-size:9px;
    }
    .auth-card {
        box-shadow:0 20px 55px #0000001a;
    }
    .auth-header {
        padding:24px 30px;
    }
    .help-hero {
        padding:45px 30px;
    }
    .help-hero h1 {
        font-size:35px;
    }
}

@media(max-width:760px) {
    :root {
        --sidebar-width:232px;
    }
    .sidebar {
        transform:translateX(-100%);
        transition:transform .22s;
    }
    .sidebar-open .sidebar {
        transform:translateX(0);
    }
    .sidebar-open .sidebar-backdrop {
        display:block;
        position:fixed;
        inset:0;
        background:#0c14268c;
        z-index:35;
        backdrop-filter:blur(2px);
    }
    .workspace-main {
        margin:0;
    }
    .mobile-menu {
        display:flex;
        margin-left:-5px;
    }
    .topbar {
        height:62px;
        margin:0 18px;
    }
    .topbar-actions {
        gap:6px;
    }
    .breadcrumb {
        gap:10px;
        font-size:11px;
    }
    .breadcrumb>span:first-of-type {
        display:none;
    }
    .breadcrumb-slash {
        display:none;
    }
    .main-content {
        padding:23px 18px 0;
    }
    .page-heading {
        align-items:flex-start;
        gap:16px;
        flex-wrap:wrap;
        margin-bottom:23px;
    }
    .page-heading h1 {
        font-size:26px;
    }
    .page-heading p {
        font-size:12px;
    }
    .page-heading .btn {
        padding:8px 12px;
        min-height:35px;
        font-size:12px;
    }
    .page-heading .eyebrow {
        font-size:9px;
    }
    .stat-grid {
        gap:12px;
        margin-bottom:22px;
    }
    .stat-card {
        padding:17px;
    }
    .stat-value {
        font-size:25px;
    }
    .stat-card>svg,.stat-card .stat-icon {
        right:15px;
        top:16px;
    }
    .panel {
        padding:18px;
    }
    .toolbar {
        gap:12px;
    }
    .toolbar form {
        flex-wrap:wrap;
        justify-content:flex-start;
        width:100%;
    }
    .toolbar .input {
        max-width:none;
        width:100%;
    }
    .toolbar .search-wrap {
        flex:1;
        min-width:140px;
    }
    .toolbar select.input {
        max-width:130px;
    }
    .tabs a,.tabs button {
        padding:6px 14px;
        font-size:11px;
    }
    .template-grid {
        gap:13px;
    }
    .template-art h3 {
        font-size:16px;
    }
    .template-art .template-logo {
        top:11px;
        left:12px;
    }
    .template-art .template-logo svg {
        width:18px;
        height:18px;
    }
    .template-art .template-copy {
        left:12px;
        bottom:22px;
        max-width:68%;
    }
    .template-art p {
        font-size:8px;
    }
    .template-art .template-qr {
        width:31px;
        height:31px;
        bottom:11px;
        right:12px;
    }
    .template-art .template-qr svg {
        width:23px;
        height:23px;
    }
    .template-body {
        padding:12px;
    }
    .template-body h3 {
        font-size:12px;
    }
    .template-body p {
        font-size:10px;
    }
    .template-card .template-actions {
        padding:0 12px 12px;
        flex-wrap:wrap;
        gap:8px;
    }
    .form-grid {
        gap:17px;
    }
    .form-actions {
        margin-top:20px;
        padding-top:19px;
    }
    .workspace-footer {
        font-size:9px;
        margin-top:27px;
        gap:12px;
    }
    .workspace-footer span:last-child {
        display:none;
    }
    .summary-strip {
        gap:12px;
        flex-wrap:wrap;
        font-size:11px;
    }
    .summary-strip span+span {
        padding-left:12px;
    }
    .data-table {
        font-size:11px;
    }
    .card-list-panel {
        padding:0;
    }
    .data-table td {
        padding-top:15px;
        padding-bottom:15px;
    }
    .card-name strong {
        font-size:12px;
    }
    .auth-header {
        padding:23px 24px;
    }
    .auth-header .brand {
        font-size:18px;
    }
    .auth-header .brand-icon {
        width:36px;
        height:36px;
        border-radius:10px;
    }
    .auth-header nav {
        gap:20px;
        font-size:11px;
    }
    .auth-header nav a:first-child {
        display:none;
    }
    .auth-slogan {
        display:none;
    }
    .auth-background {
        background-size:auto 100%;
        background-position:60% center;
        opacity:.85;
    }
    .auth-main {
        padding:102px 20px 65px;
    }
    .auth-card {
        padding:31px 25px 26px;
        border-radius:18px;
    }
    .auth-title h1 {
        font-size:23px;
    }
    .auth-title p {
        font-size:12px;
    }
    .auth-card-logo {
        width:48px;
        height:48px;
    }
    .auth-footer {
        font-size:9px;
    }
    .register-card .form-grid,.installer-card .form-grid {
        grid-template-columns:1fr;
    }
    .register-card .span-2,.installer-card .span-2 {
        grid-column:auto;
    }
    .installer-card .auth-title h1 {
        font-size:22px;
    }
    .installer-form {
        gap:16px;
    }
    .installer-card {
        padding:27px 22px;
    }
    .install-note {
        font-size:9px;
    }
    .auth-page:has(.installer-card) .auth-main {
        padding-top:94px;
    }
    .document-header {
        padding:20px;
    }
    .document-header .brand {
        font-size:17px;
    }
    .document-header .btn {
        font-size:11px;
        padding:8px 11px;
    }
    .document-content {
        padding:0 18px 30px;
    }
    .help-hero {
        padding:40px 24px;
    }
    .help-hero h1 {
        font-size:31px;
    }
    .help-art {
        opacity:.6;
        mask-image:linear-gradient(to right,transparent,#000);
    }
    .help-features {
        grid-template-columns:1fr;
        gap:13px;
    }
    .help-questions {
        padding:23px;
    }
    .account-logout {
        align-items:flex-start;
        flex-direction:column;
        gap:13px;
    }
}

@media(max-width:430px) {
    .form-grid {
        grid-template-columns:1fr;
    }
    .span-2 {
        grid-column:auto;
    }
    .template-grid {
        grid-template-columns:1fr;
    }
    .template-art h3 {
        font-size:23px;
    }
    .template-art .template-copy {
        left:24px;
        bottom:38px;
    }
    .template-art .template-logo {
        left:24px;
        top:21px;
    }
    .template-art .template-qr {
        width:49px;
        height:49px;
        right:21px;
        bottom:23px;
    }
    .template-art .template-qr svg {
        width:34px;
        height:34px;
    }
    .template-body {
        padding:17px 21px;
    }
    .template-body h3 {
        font-size:14px;
    }
    .template-body p {
        font-size:12px;
    }
    .template-card .template-actions {
        padding:0 21px 17px;
    }
    .material-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:11px;
    }
    .material-card>img,.material-preview {
        height:140px;
        padding:15px;
    }
    .stat-label {
        font-size:10px;
    }
    .stat-meta,.stat-card small {
        font-size:10px;
    }
    .topbar-actions .notification-btn {
        display:none;
    }
    .page-heading>.row {
        width:100%;
    }
    .welcome-panel {
        padding:24px;
    }
    .welcome-panel h2 {
        font-size:21px;
    }
    .welcome-panel p {
        font-size:12px;
    }
}

.block {
    display:block;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.text-right {
    text-align:right;
}

.text-link {
    font-size:12px;
    color:var(--blue);
    display:inline-flex;
    gap:5px;
    align-items:center;
}

.count-pill {
    font-size:14px;
    font-weight:500;
    color:var(--muted);
    background:var(--line);
    border-radius:20px;
    padding:3px 11px;
    letter-spacing:0;
}

.stat-card>span {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-bottom:11px;
}

.stat-card>strong {
    display:block;
    font-size:29px;
    font-weight:650;
    letter-spacing:-.6px;
    line-height:1.3;
}

.stat-grid.compact {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.stat-grid.compact .stat-card {
    padding:18px 22px;
}

.stat-grid.compact .stat-card>span {
    font-size:11px;
    margin-bottom:5px;
}

.stat-grid.compact .stat-card>strong {
    font-size:24px;
}

.user-code {
    color:#818bd2;
    font-size:11px;
    font-weight:600;
}

.card-avatar {
    width:40px;
    height:40px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:var(--blue-soft);
    color:var(--blue);
    flex-shrink:0;
}

.card-name .btn.icon-btn {
    margin-left:8px;
    width:25px;
    height:25px;
}

.card-name .btn.icon-btn svg {
    width:14px;
    height:14px;
}

.template-info {
    padding:18px 20px;
}

.template-info .row {
    justify-content:space-between;
}

.template-info p {
    font-size:11px;
    line-height:1.9;
    margin:5px 0 16px;
}

.template-info .btn {
    min-height:34px;
    font-size:12px;
    padding:6px 13px;
}

.quick-start {
    margin-top:23px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:linear-gradient(120deg,var(--surface) 30%,var(--blue-soft));
}

.quick-start h2 {
    font-size:17px;
    margin-bottom:7px;
}

.quick-start p {
    font-size:12px;
}

.announcement-summary {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    border-bottom:1px solid var(--line);
    padding:15px 0;
}

.announcement-summary:first-child {
    padding-top:0;
}

.announcement-summary:last-child {
    border:0;
}

.announcement-summary strong {
    font-size:13px;
}

.small-empty {
    padding:39px 12px;
}

.chart-bars {
    height:250px;
    align-items:stretch;
    gap:6px;
    padding:10px 0 25px;
    border:0;
}

.chart-column {
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
    text-align:center;
}

.chart-value {
    font-size:10px;
    color:var(--muted);
    height:21px;
}

.chart-track {
    flex:1;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    border-bottom:1px solid var(--line);
    padding:0 12%;
}

.chart-column .chart-bar {
    width:100%;
    max-width:36px;
    flex:initial;
    min-height:2px;
    background:linear-gradient(#5385ff,#b9d1ff);
    border-radius:4px 4px 0 0;
    box-shadow:0 -2px 7px #2463ff06;
    display:block;
}

.chart-column small {
    font-size:9px;
    color:var(--muted);
    margin-top:9px;
    white-space:nowrap;
}

.chart-note {
    font-size:12px;
    padding-top:8px;
}

.device-row {
    display:flex;
    gap:12px;
    align-items:center;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    font-size:12px;
}

.device-row:last-child {
    border:0;
}

.device-row strong {
    margin-left:auto;
}

.device-row small {
    width:55px;
    text-align:right;
}

.dashboard-grid {
    margin-top:24px;
}

.material-info {
    padding:14px 16px;
}

.material-info h3,.material-info strong {
    font-size:12px;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.material-info p {
    font-size:11px;
    margin:4px 0 11px;
}

.material-info .row {
    justify-content:space-between;
    gap:7px;
}

.material-info .btn {
    min-height:30px;
    padding:5px 9px;
    font-size:11px;
}

.settings-form .form-grid+.form-grid {
    margin-top:22px;
}

.inline-form {
    display:flex;
    gap:8px;
    align-items:center;
}

.table-wrap .input {
    min-height:32px;
    padding:6px 8px;
    font-size:12px;
}

.table-wrap .btn {
    font-size:11px;
    min-height:31px;
    padding:5px 9px;
}

.form-header {
    border-bottom:1px solid var(--line);
    padding-bottom:17px;
    margin-bottom:22px;
}

.form-header h2 {
    font-size:16px;
}

.form-header p {
    font-size:12px;
    color:var(--muted);
    margin-top:5px;
}

.form-subheading {
    grid-column:1/-1;
    border-bottom:1px solid var(--line);
    padding:6px 0 13px;
    margin-top:7px;
    font-size:15px;
}

.card-form-grid {
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:24px;
}

.form-preview {
    position:sticky;
    top:25px;
    align-self:start;
}

.theme-chips {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
}

.theme-chip {
    padding:7px 13px;
    border:1px solid var(--line);
    border-radius:7px;
    cursor:pointer;
}

.theme-chip:has(input:checked) {
    border-color:var(--blue);
    background:var(--blue-soft);
    color:var(--blue);
}

.theme-chip input {
    margin-right:7px;
}

.settings-secret {
    font-size:12px;
    line-height:1.8;
}

.badge.admin {
    color:var(--blue);
    background:var(--blue-soft);
}

.badge.member {
    color:var(--muted);
}

@media(max-width:760px) {
    .stat-grid.compact {
        gap:10px;
    }
    .stat-grid.compact .stat-card {
        padding:14px 12px;
    }
    .stat-grid.compact .stat-card>strong {
        font-size:22px;
    }
    .stat-grid.compact .stat-card>span {
        font-size:10px;
    }
    .quick-start {
        align-items:flex-start;
        flex-direction:column;
    }
    .card-form-grid {
        grid-template-columns:1fr;
    }
    .chart-column small {
        font-size:8px;
    }
    .chart-bars:has(.chart-column:nth-child(15)) {
        overflow-x:auto;
        justify-content:flex-start;
    }
    .chart-bars:has(.chart-column:nth-child(15)) .chart-column {
        min-width:32px;
    }
    .chart-track {
        padding:0 16%;
    }
}

.form-panel>h2 {
    font-size:16px;
    margin-bottom:22px;
}

.form-panel>p {
    font-size:12px;
    margin:-12px 0 22px;
}

.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

.section-heading h2 {
    font-size:16px;
}

.section-heading p {
    font-size:11px;
    line-height:1.8;
    margin-top:6px;
}

.form-panel .notice {
    margin-top:22px;
    margin-bottom:0;
    font-size:12px;
}

.checkbox-row {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:var(--muted);
    cursor:pointer;
}

.upload-form {
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:space-between;
}

.upload-form .field {
    max-width:600px;
    width:100%;
}

.upload-form .btn {
    flex-shrink:0;
}

.material-select-preview:empty {
    display:none;
}

.material-select-preview {
    padding:16px;
    border:1px solid var(--line);
    background:var(--surface-alt);
    border-radius:8px;
}

.material-select-preview img {
    max-height:150px;
    object-fit:contain;
    display:block;
    margin:auto;
    border-radius:5px;
}

.template-select .template-card {
    cursor:pointer;
    position:relative;
}

.template-select input[type=radio] {
    position:absolute;
    top:13px;
    right:13px;
    z-index:1;
    accent-color:var(--blue);
    width:17px;
    height:17px;
}

.template-select .template-card:has(input:checked) {
    border-color:var(--blue);
    box-shadow:0 0 0 1px var(--blue);
}

.template-select .template-info {
    display:flex;
    flex-direction:column;
    gap:5px;
}

.template-select .template-info small {
    font-size:11px;
}

.template-qr small {
    position:absolute;
    bottom:-14px;
    left:0;
    right:0;
    text-align:center;
    font-size:8px;
    white-space:nowrap;
    font-weight:400;
}

.template-qr svg {
    width:36px;
    height:36px;
}

.theme-noir .template-qr small {
    color:#fff;
}

.template-copy h3 {
    overflow-wrap:anywhere;
}

.template-select .template-copy h3 {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:18px;
}

.admin-contact {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    padding:14px;
    background:var(--blue-soft);
    color:var(--blue);
    border-radius:9px;
    font-size:12px;
}

.template-info .row {
    flex-wrap:wrap;
    gap:9px;
}

@media(max-width:760px) {
    .section-heading {
        flex-wrap:wrap;
    }
    .upload-form {
        flex-direction:column;
        align-items:flex-start;
    }
    .template-qr svg {
        width:27px;
        height:27px;
    }
    .template-select .template-copy h3 {
        font-size:15px;
    }
    .template-select .template-info {
        padding:12px;
    }
    .template-select .template-info small {
        font-size:10px;
    }
}

@media(max-width:430px) {
    .template-qr svg {
        width:37px;
        height:37px;
    }
    .template-select .template-copy h3 {
        font-size:20px;
    }
}

.action-buttons .btn.ghost.icon-btn {
    background:transparent;
    box-shadow:none;
    padding:0;
}

.action-buttons .btn.ghost.icon-btn.danger {
    color:#ed586f;
}

.action-buttons .btn.ghost.icon-btn.danger:hover {
    background:#ed586f14;
    border-color:#ed586f50;
}

.data-table td {
    padding-top:13px;
    padding-bottom:13px;
}

.btn.ghost.danger {
    background:transparent;
    color:#e45468;
    box-shadow:none;
}

.btn.ghost.danger:hover {
    background:#e454680c;
}

.template-card .template-copy p {
    font-size:10px;
}

@media(prefers-reduced-motion:reduce) {
    * {
        transition:none!important;
        scroll-behavior:auto!important;
    }
}