:root {
    color-scheme: dark;
    --bg: #0f1724;
    --bg-deep: #070b12;
    --surface: rgba(15, 23, 36, .78);
    --surface-strong: rgba(20, 30, 46, .92);
    --line: rgba(255, 255, 255, .11);
    --line-strong: rgba(249, 115, 22, .38);
    --text: #ffffff;
    --muted: #94a3b8;
    --muted-strong: #cbd5e1;
    --brand: #f97316;
    --brand-soft: rgba(249, 115, 22, .18);
    --green: #10b981;
    --red: #ef4444;
    --blue: #60a5fa;
    --radius: 20px;
    --radius-sm: 12px;
    --shadow: 0 28px 100px rgba(0, 0, 0, .38);
    --mono: "Cascadia Mono", "Consolas", monospace;
    --sans: "Microsoft YaHei", "PingFang SC", "Inter", Arial, sans-serif;
    --spot-x: 76%;
    --spot-y: 22%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sans);
    color: var(--text);
    background:
        radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(249, 115, 22, .22), transparent 18rem),
        radial-gradient(circle at 18% 0%, rgba(96, 165, 250, .10), transparent 26rem),
        linear-gradient(180deg, #101827 0%, #0f1724 48%, #070b12 100%);
    overflow-x: hidden;
}
body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--mouse-x, 78%) var(--mouse-y, 24%), rgba(249,115,22,.24), transparent 15rem);
    mix-blend-mode: screen;
    opacity: .85;
    z-index: 0;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

.shell {
    position: relative;
    z-index: 1;
    width: min(1220px, calc(100% - 48px));
    margin: 0 auto;
}

.topbar {
    position: relative;
    z-index: 50;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(22px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 190px; }
.brand-mark {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #fb923c, #f97316 54%, #ea580c);
    color: #fff; font-weight: 900; box-shadow: 0 16px 38px rgba(249,115,22,.34);
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 20px; letter-spacing: .02em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 13px; }
.topbar nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.topbar nav a {
    position: relative; padding: 10px 16px; border-radius: 10px;
    color: var(--muted-strong); transition: color .2s ease, background .2s ease, transform .2s ease;
}
.topbar nav a:hover, .topbar nav a.active { color: #fff; background: rgba(255,255,255,.055); transform: translateY(-1px); }
.topbar nav a.active:after {
    content: ""; position: absolute; left: 17px; right: 17px; bottom: 5px; height: 2px;
    border-radius: 999px; background: var(--brand); box-shadow: 0 0 16px rgba(249,115,22,.8);
}

.flash {
    margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: rgba(255,255,255,.055); color: var(--muted-strong);
}
.flash.error { border-color: rgba(239,68,68,.45); color: #fecaca; }

.button, .chip-button, .link-button {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 22px; border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    overflow: hidden;
}
.button.primary, .chip-button:hover {
    border-color: rgba(249,115,22,.78);
    background: linear-gradient(135deg, #fb923c, #f97316 52%, #ea580c);
    box-shadow: 0 18px 46px rgba(249,115,22,.30);
    color: #fff; font-weight: 800;
}
.button.ghost { background: rgba(15,23,36,.72); }
.button.small { min-height: 38px; padding: 0 16px; }
.button:hover, .chip-button:hover, .link-button:hover { transform: translateY(-2px); border-color: rgba(249,115,22,.45); }
.fx-shine:before {
    content: ""; position: absolute; inset: -80% auto auto -55%; width: 44%; height: 240%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.58), transparent);
    transform: rotate(18deg); opacity: 0;
}
.fx-shine:hover:before { opacity: 1; animation: kdShine .9s ease; }
@keyframes kdShine { to { left: 125%; } }

.builder-home-output { width: 100vw; margin-left: calc(50% - 50vw); }
.kd-page-ambient { position: relative; }

.panel, .form-card, .user-detail-panel, .user-list-panel, .stat-grid article, .download-item, .file-table > div {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.026)), var(--surface);
    box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.panel { margin: 40px auto; padding: 34px; }
.panel h1, .panel h2, .form-card h1 { margin-top: 0; color: #fff; }
p, dd, .download-item span, small { color: var(--muted); line-height: 1.8; }
.section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.section-title h1, .section-title h2 { margin: 0 0 8px; }

.auth-panel { min-height: calc(100vh - 180px); display: grid; place-items: center; padding: 46px 0; }
.form-card { width: min(460px, 100%); padding: 34px; }
.form-card label, .release-form label, .content-form label, .custom-time-form label { display: grid; gap: 9px; margin-bottom: 16px; color: var(--muted-strong); }
input, textarea, select {
    width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
    background: rgba(3,7,18,.56); color: #fff; padding: 13px 14px; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: rgba(249,115,22,.62); box-shadow: 0 0 0 4px rgba(249,115,22,.12); }

.page-grid, .admin-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 24px; margin: 24px 0 48px; }
.profile-list { display: grid; grid-template-columns: 140px 1fr; gap: 12px 16px; }
.profile-list dt { color: var(--muted); }
.profile-list dd { margin: 0; font-family: var(--mono); color: #fff; }
.accent-panel { border-color: rgba(249,115,22,.35); }

.download-list, .file-table { display: grid; gap: 14px; }
.download-item, .file-table > div { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px; }
.download-item strong, .file-table span { display: block; color: #fff; }
.upload-box, .release-form, .custom-time-form, .quick-actions, .danger-zone { display: grid; gap: 14px; }
.release-form { margin-top: 16px; }
.check-line { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 10px; }
.check-line input { width: auto; }
.link-button { min-height: 34px; padding: 0 12px; background: transparent; border-color: transparent; color: var(--brand); }
.danger-link { color: #fecaca; }

.admin-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 14px; }
.admin-tabs a { padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted-strong); background: rgba(255,255,255,.04); }
.admin-tabs a.active { color: #fff; border-color: rgba(249,115,22,.55); background: rgba(249,115,22,.14); }
.admin-layout > .admin-tabs {
    grid-column: 1 / -1;
    margin-bottom: 0;
}
.admin-layout .panel,
.admin-content-page .panel,
.admin-users-page .panel {
    margin: 0;
}
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.stat-grid article { padding: 22px; }
.stat-grid span { display: block; color: var(--muted); }
.stat-grid strong { font: 800 34px/1 var(--mono); color: #fff; }
.admin-users-page { margin-bottom: 60px; }
.user-workspace { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; }
.user-list-panel, .user-detail-panel { padding: 24px; }
.user-list { display: grid; gap: 10px; }
.user-list-item { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); }
.user-list-item.active { border-color: rgba(249,115,22,.55); background: rgba(249,115,22,.10); }
.detail-header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.detail-header h1 { margin: 6px 0; }
.detail-status { display: flex; gap: 8px; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; }
.status-pill { display: inline-flex; align-items: center; padding: 8px 11px; border-radius: 999px; border: 1px solid var(--line); color: #fff; }
.status-pill.ok { border-color: rgba(16,185,129,.45); color: #bbf7d0; background: rgba(16,185,129,.12); }
.status-pill.warn { border-color: rgba(249,115,22,.45); color: #fed7aa; background: rgba(249,115,22,.12); }
.status-pill.danger { border-color: rgba(239,68,68,.45); color: #fecaca; background: rgba(239,68,68,.12); }
.detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0; }
.detail-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); }
.detail-grid span { display: block; margin-bottom: 8px; }
.detail-grid strong { font-family: var(--mono); color: #fff; }
.quick-actions.large { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.action-section { margin-top: 26px; }
.risk-box {
    margin: 12px 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(249,115,22,.42);
    border-radius: 14px;
    color: #fed7aa;
    background: rgba(249,115,22,.12);
}
.device-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.device-list, .login-log-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.device-item, .login-log-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}
.device-item strong, .device-item span, .device-item small {
    display: block;
}
.device-item span, .device-item small, .login-log-list span {
    color: var(--muted);
}
.device-clear-form {
    margin-top: 12px;
}
.sub-title {
    margin: 22px 0 6px;
    color: #fff;
}

.footer { display: flex; justify-content: space-between; gap: 18px; padding: 30px 0 42px; border-top: 1px solid rgba(255,255,255,.09); color: var(--muted); }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; align-items: center; }
.footer-domain { color: #fbbf24; }
.footer-beian { color: var(--muted); }
.footer-beian:hover { color: #fff; }

/* Free canvas editor */
.kd-free-editor-page { width: calc(100vw - 72px); max-width: none; margin-left: calc(50% - 50vw + 36px); margin-right: calc(50% - 50vw + 36px); }
.kd-free-editor-panel { margin-top: 22px; padding: 24px; max-width: none; }
.kd-editor-head { align-items: center; }
.kd-editor-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.kd-editor-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; margin-top: 20px; }
.kd-component-panel { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: rgba(4,8,14,.72); height: min(80vh, 780px); overflow: auto; }
.kd-component-panel h2 { margin: 0 0 6px; }
.kd-component-panel p { margin: 0 0 14px; font-size: 13px; }
.kd-component-panel button { width: 100%; margin-bottom: 10px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.055); color: #fff; cursor: grab; text-align: left; }
.kd-component-panel button:hover { border-color: rgba(249,115,22,.48); background: rgba(249,115,22,.12); }
.kd-canvas-stage { min-width: 0; }
.kd-canvas-ruler { margin-bottom: 10px; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.kd-free-canvas { position: relative; width: 1280px; max-width: 100%; height: 780px; overflow: hidden; border: 1px solid rgba(249,115,22,.24); border-radius: 20px; background: #0f1724 url('/assets/images/kd-ambient-bg.png') center top/cover no-repeat; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 34px 120px rgba(0,0,0,.38); transform-origin: top left; }
.kd-free-canvas:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 28%, rgba(249,115,22,.34), transparent 17rem), linear-gradient(180deg, transparent 0%, rgba(15,23,36,.35) 78%, #0f1724 100%); }
.canvas-item { position: absolute; z-index: 2; min-width: 80px; min-height: 48px; border: 1px solid transparent; border-radius: 14px; color: #fff; transform: translateZ(0); }
.canvas-item:hover { border-color: rgba(96,165,250,.55); }
.canvas-item.selected { border-color: #60a5fa; box-shadow: 0 0 0 1px #60a5fa, 0 0 36px rgba(96,165,250,.22); }
.canvas-item .item-content { width: 100%; height: 100%; overflow: hidden; }
.canvas-item .item-delete { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; display: none; place-items: center; border: 1px solid rgba(239,68,68,.45); border-radius: 999px; background: rgba(127,29,29,.92); color: #fff; cursor: pointer; z-index: 12; }
.canvas-item:hover .item-delete, .canvas-item.selected .item-delete { display: grid; }
.resize-handle { position: absolute; width: 10px; height: 10px; border: 1px solid #bfdbfe; background: #60a5fa; border-radius: 3px; display: none; z-index: 10; }
.canvas-item.selected .resize-handle { display: block; }
.resize-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }.resize-handle.n { left: 50%; top: -6px; margin-left: -5px; cursor: ns-resize; }.resize-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }.resize-handle.e { right: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }.resize-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }.resize-handle.s { left: 50%; bottom: -6px; margin-left: -5px; cursor: ns-resize; }.resize-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }.resize-handle.w { left: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.canvas-item [contenteditable="true"] { outline: none; cursor: text; }

@media (max-width: 980px) {
    .shell { width: min(100% - 28px, 1220px); }
    .topbar { height: auto; min-height: 78px; align-items: flex-start; padding: 14px 0; flex-direction: column; }
    .topbar nav { justify-content: flex-start; }
    .page-grid, .admin-layout, .user-workspace, .kd-editor-shell { grid-template-columns: 1fr; }
    .stat-grid, .detail-grid, .quick-actions.large { grid-template-columns: 1fr 1fr; }
    .kd-free-editor-page { width: 100%; margin-left: 0; margin-right: 0; }
}
@media (max-width: 620px) {
    .stat-grid, .detail-grid, .quick-actions.large { grid-template-columns: 1fr; }
    .download-item, .file-table > div, .detail-header, .section-title, .footer { flex-direction: column; align-items: flex-start; }
    .panel, .form-card { padding: 22px; }
}


/* Fix canvas output overlap and editor text editing ergonomics */
.canvas-output-item.type-hero {
    overflow: visible !important;
    pointer-events: none;
}
.canvas-output-item.type-hero a,
.canvas-output-item.type-hero button {
    pointer-events: auto;
}
.canvas-output-item .item-content {
    pointer-events: auto;
}
.kd-editor-shell {
    grid-template-columns: 230px minmax(0, 1fr) 280px;
}
.kd-inspector-panel {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    background: rgba(4,8,14,.72);
    height: min(80vh, 780px);
    overflow: auto;
}
.kd-inspector-panel h2 {
    margin: 0 0 6px;
}
.kd-inspector-panel p {
    margin: 0 0 14px;
    font-size: 13px;
}
.kd-inspector-panel label {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--muted-strong);
}
.kd-inspector-panel textarea {
    min-height: 240px;
    font-family: var(--sans);
    line-height: 1.65;
}
.item-move {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 14;
    display: none;
    padding: 5px 8px;
    border: 1px solid rgba(96,165,250,.55);
    border-radius: 999px;
    background: rgba(15,23,36,.86);
    color: #bfdbfe;
    font-size: 12px;
    cursor: move;
    user-select: none;
}
.canvas-item:hover .item-move,
.canvas-item.selected .item-move {
    display: inline-flex;
}
.canvas-item .item-content {
    cursor: text;
}
.canvas-item .item-content a {
    cursor: text;
}
.canvas-item .item-content h1,
.canvas-output-item .item-content h1 {
    font-size: clamp(24px, 2.2em, 96px);
    line-height: 1.12;
}
.canvas-item .item-content h2,
.canvas-output-item .item-content h2 {
    font-size: clamp(18px, 1.55em, 48px);
    line-height: 1.22;
}
.canvas-item .item-content p,
.canvas-output-item .item-content p {
    font-size: 1em;
    line-height: 1.75;
}
.canvas-item.type-hero .item-content h1,
.canvas-output-item.type-hero .item-content h1 {
    font-size: clamp(32px, 3.2em, 128px);
    line-height: 1.06;
    overflow: visible;
}
.canvas-item.type-hero .item-content p,
.canvas-output-item.type-hero .item-content p {
    font-size: 1em;
}
.canvas-item .kd-pill,
.canvas-output-item .kd-pill {
    font-size: 1.2em;
    line-height: 1.25;
}
.canvas-item.selected .item-content {
    outline: 1px dashed rgba(96,165,250,.34);
    outline-offset: -4px;
}
@media (max-width: 1200px) {
    .kd-editor-shell {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    .kd-inspector-panel {
        grid-column: 1 / -1;
        height: auto;
    }
}


/* Admin tabs and inspector usability fixes */
.admin-tabs {
    align-items: flex-start;
    align-content: flex-start;
    min-height: 0;
}
.admin-tabs a {
    flex: 0 0 auto;
    align-self: flex-start;
    height: auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kd-inspector-panel input,
.kd-inspector-panel textarea {
    font-size: 15px;
}
.canvas-item .item-content {
    overflow: hidden;
    user-select: none;
}
.canvas-item.is-editing .item-content {
    user-select: text;
    outline: 1px solid rgba(249,115,22,.62);
    box-shadow: inset 0 0 0 1px rgba(249,115,22,.18);
}
.canvas-item.is-editing .item-move,
.canvas-item.is-editing .resize-handle {
    display: none !important;
}
.canvas-output-item,
.canvas-output-item * {
    user-select: none;
    -webkit-user-modify: read-only;
}
.canvas-output-item a,
.canvas-output-item button {
    user-select: auto;
}
.canvas-output-item .item-content {
    overflow: hidden;
}


.canvas-item.type-hero .item-content,
.canvas-output-item.type-hero .item-content {
    padding-left: 24px;
    padding-right: 24px;
    overflow: visible;
}

/* 进港数据下载助手授权 */
.assistant-license-page { display: grid; gap: 24px; margin: 24px 0 56px; }
.assistant-license-hero { border-color: rgba(249, 161, 22, .45); }
.assistant-license-form { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 14px; align-items: end; margin-top: 22px; }
.assistant-license-form label { display: grid; gap: 8px; }
.assistant-license-form input, .assistant-reissue-form input, .assistant-hours-form input { width: 100%; box-sizing: border-box; }
.form-help { margin: 14px 0 0; color: var(--muted); line-height: 1.7; }
.assistant-device-list { display: grid; gap: 14px; margin-top: 18px; }
.assistant-device-card { display: flex; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); }
.assistant-device-card > div:first-child { display: grid; gap: 6px; min-width: 0; }
.assistant-device-card strong { color: #f2f7fa; word-break: break-all; }
.assistant-device-card span, .assistant-device-card small, .muted { color: var(--muted); }
.assistant-device-action, .assistant-admin-actions { display: flex; align-items: flex-end; justify-content: center; gap: 10px; flex-direction: column; flex: 0 0 auto; }
.assistant-admin-section { padding: 22px; border: 1px solid rgba(249,161,22,.28); border-radius: 16px; background: rgba(249,161,22,.035); }
.assistant-hours-form { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 10px 12px; align-items: end; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.assistant-hours-form label { display: grid; gap: 8px; }
.assistant-hours-form small { grid-column: 1 / -1; color: var(--muted); line-height: 1.6; }
.assistant-reissue-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; }
@media (max-width: 760px) {
    .assistant-license-form { grid-template-columns: 1fr; }
    .assistant-device-card { flex-direction: column; }
    .assistant-device-action, .assistant-admin-actions { align-items: stretch; }
    .assistant-hours-form { grid-template-columns: 1fr; }
    .assistant-reissue-form { grid-template-columns: 1fr; }
}