:root { color:#172238; background:#f4f7fb; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; font-synthesis:none; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; } button,input { font:inherit; } button { cursor:pointer; }
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(320px,1.1fr) minmax(360px,.9fr); background:radial-gradient(circle at 20% 18%,#7869ff 0,#2b2858 31%,#11172d 75%); }
.login-intro { color:#fff; padding:clamp(48px,10vw,140px); display:flex; flex-direction:column; justify-content:space-between; }
.brand,.top-brand { display:flex; gap:11px; align-items:center; font-weight:750; letter-spacing:.04em; }.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg,#9a90ff,#ff99c8); color:#272059; font-size:18px; }
.login-intro h1 { margin:48px 0 18px; max-width:600px; font-size:clamp(42px,5vw,70px); line-height:1.12; letter-spacing:-.05em; }.login-intro p { max-width:460px; color:#d5d8f1; font-size:17px; line-height:1.7; }.login-note { color:#b7bbdc; font-size:13px; }
.login-panel { margin:24px; border-radius:28px; background:#fff; display:flex; align-items:center; justify-content:center; padding:48px; }.login-card { width:min(100%,390px); }.eyebrow { color:#766cf1; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }h2 { margin:12px 0 8px; font-size:32px; letter-spacing:-.04em; }.subtle { color:#6b7485; margin:0 0 28px; line-height:1.55; }
.field { display:block; margin:18px 0; color:#435067; font-size:13px; font-weight:700; }.field input,.field select { margin-top:8px; width:100%; border:1px solid #d9deea; border-radius:12px; padding:13px 14px; color:#172238; background:#fff; outline-color:#7067ea; }.field-hint { display:block; margin-top:5px; color:#7c8798; font-size:12px; font-weight:500; }.input-with-action { display:flex; align-items:end; gap:8px; }.input-with-action input { min-width:0; }.input-with-action .table-action { flex:0 0 auto; margin-top:8px; white-space:nowrap; }.primary { border:0; border-radius:12px; padding:13px 18px; color:#fff; background:#655bea; font-weight:700; width:100%; box-shadow:0 10px 24px #655bea44; }.primary:disabled { opacity:.65; cursor:wait; }.form-error { min-height:20px; margin:12px 0 0; color:#c3344f; font-size:13px; }.primary.compact { width:auto; padding:10px 15px; box-shadow:none; }.template-form { margin-top:0; }.is-hidden { display:none; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }.field-wide,.form-actions,.form-divider { grid-column:1 / -1; }.form-actions { display:flex; align-items:center; gap:12px; }.form-actions .form-error { margin:0; }.form-divider { margin-top:10px; padding-top:18px; border-top:1px solid #edf0f5; color:#536078; font-size:13px; font-weight:800; }.checkbox-field { display:flex; align-items:center; gap:8px; margin:18px 0; color:#435067; font-size:13px; font-weight:700; }.checkbox-field input { accent-color:#655bea; }.table-action { border:1px solid #d9deea; border-radius:8px; padding:7px 10px; color:#5c52dc; background:#f8f7ff; font-size:12px; font-weight:700; }.table-actions { display:flex; flex-wrap:wrap; gap:6px; }.table-action.danger { color:#bb3450; background:#fff6f7; border-color:#f0d8de; }.publish-ready { display:flex; align-items:center; justify-content:space-between; gap:18px; }.publish-ready h3 { margin:0 0 6px; }.publish-ready p { margin:0; color:#6b7485; }.muted,small { color:#7c8798; font-size:12px; }
.shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }.sidebar { background:#161c34; color:#d4d8ed; padding:24px 14px; display:flex; flex-direction:column; gap:26px; }.sidebar .top-brand { padding:0 12px; color:#fff; }.nav { display:grid; gap:5px; }.nav button { text-align:left; border:0; border-radius:10px; background:transparent; color:inherit; padding:11px 12px; }.nav button:hover,.nav button.active { background:#2a335c; color:#fff; }.sidebar-footer { margin-top:auto; padding:12px; border-top:1px solid #313a60; font-size:12px; color:#aeb5d4; }
.layout { min-width:0; }.topbar { min-height:74px; background:#fff; border-bottom:1px solid #e6eaf2; display:flex; align-items:center; justify-content:space-between; padding:0 34px; }.profile { display:flex; align-items:center; gap:10px; color:#536078; font-size:14px; }.avatar { width:34px; height:34px; border-radius:50%; background:#e8e5ff; color:#5b52dc; display:grid; place-items:center; font-weight:800; }.link-button { border:0; background:transparent; color:#746ae8; padding:6px; }.content { padding:32px 34px 48px; max-width:1400px; }.content-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:24px; }.content-head h1 { margin:0; font-size:28px; letter-spacing:-.04em; }.content-head p { margin:7px 0 0; color:#7a8495; }.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.metric,.panel { background:#fff; border:1px solid #e6eaf2; border-radius:16px; padding:20px; }.metric small { color:#778298; font-weight:650; }.metric strong { display:block; margin-top:10px; font-size:30px; letter-spacing:-.05em; }.metric span { color:#22a06b; font-size:12px; }.panel { margin-top:18px; overflow:auto; }.panel-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }.panel-title h3 { margin:0; font-size:16px; }table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; }th { color:#8992a3; font-size:12px; font-weight:650; padding:10px 8px; }td { border-top:1px solid #edf0f5; padding:14px 8px; color:#334057; }.badge { display:inline-block; border-radius:99px; padding:4px 8px; background:#eaf8f1; color:#168655; font-size:12px; font-weight:700; }.badge.disabled { background:#f3f1f1; color:#8c7480; }.empty { padding:34px 8px; color:#7b8699; text-align:center; }.loading { color:#7a72e4; padding:32px 0; }
.model-plan { padding:20px; border-radius:16px; background:linear-gradient(135deg,#f1efff,#fff8fb); border:1px solid #dfdcff; }.model-preset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.model-preset { min-height:154px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; padding:16px; border-radius:13px; background:#fff; border:1px solid #e9e7f5; }.model-preset h3 { margin:7px 0 5px; font-size:16px; }.model-preset p { margin:0; color:#737d90; font-size:12px; line-height:1.55; }.model-role { color:#6459dd; font-size:11px; font-weight:800; }.model-preset .table-action { align-self:flex-start; }.midjourney-note { display:flex; align-items:center; gap:14px; margin-top:16px; padding:14px 18px; border:1px solid #f0ddb5; border-radius:13px; background:#fffaf0; color:#77603a; font-size:13px; }.midjourney-note strong { color:#513d1d; }
.link-action { display:inline-flex; align-items:center; text-decoration:none; }.page-editor-title > div { display:grid; gap:5px; }.draft-chip { border-radius:99px; padding:7px 10px; color:#76650c; background:#fff8cf; font-size:11px; font-weight:750; }.section-toolbar { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:12px 0 8px; padding-top:18px; border-top:1px solid #edf0f5; }.section-toolbar > div:first-child { display:grid; gap:4px; }.section-add { display:flex; gap:8px; }.section-add select { border:1px solid #d9deea; border-radius:9px; padding:7px 10px; color:#435067; background:#fff; }.section-stack { display:grid; gap:12px; }.section-editor-card { overflow:hidden; border:1px solid #e2e7f0; border-radius:15px; background:#fafbfe; transition:.2s ease; }.section-editor-card.is-disabled { opacity:.68; background:#f4f5f8; }.section-editor-card header { display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff; border-bottom:1px solid #edf0f5; }.section-number { color:#756bec; font-size:12px; font-weight:850; }.section-editor-card header > div:nth-child(2) { display:grid; gap:4px; }.section-controls { display:flex; gap:6px; margin-left:auto; }.icon-action { width:30px; height:30px; display:grid; place-items:center; border:1px solid #dce1eb; border-radius:8px; color:#5d65a0; background:#fff; }.icon-action:hover:not(:disabled) { border-color:#8f87ed; color:#5c52dc; }.icon-action:disabled { opacity:.35; cursor:not-allowed; }.icon-action.danger { color:#bd4560; }.section-fields { display:grid; grid-template-columns:1fr 1fr 130px auto; gap:12px; align-items:end; padding:4px 16px 14px; }.section-fields .field,.section-fields .checkbox-field { margin-bottom:0; }.visibility-toggle { min-height:45px; }.visual-settings { margin:0 16px 14px; padding:14px; border:1px solid #e5e2fb; border-radius:12px; background:#f8f7ff; }.visual-settings-head { display:grid; gap:3px; margin-bottom:8px; color:#4e4a72; }.visual-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }.visual-settings .field { margin:10px 0 0; }.field textarea { width:100%; min-height:92px; margin-top:8px; border:1px solid #d9deea; border-radius:11px; padding:12px 13px; resize:vertical; color:#30405b; background:#fff; font:12px/1.55 inherit; outline-color:#7067ea; }.field textarea.tall-textarea { min-height:190px; font-family:Consolas,"SFMono-Regular",monospace; }.section-editor-card details { border-top:1px dashed #dfe4ed; }.section-editor-card summary { cursor:pointer; padding:12px 16px; color:#667186; font-size:12px; font-weight:750; list-style:none; }.section-editor-card summary span { margin-left:5px; border-radius:5px; padding:2px 5px; color:#6d63e6; background:#eeecff; font-size:10px; }.payload-field { margin:0; padding:0 16px 16px; }.payload-field textarea { min-height:210px; font-family:Consolas,"SFMono-Regular",monospace; }.page-editor-actions { position:sticky; bottom:12px; z-index:2; margin-top:8px; padding:12px; border:1px solid #e1e5ee; border-radius:13px; background:#ffffffee; box-shadow:0 12px 32px #28385b1f; backdrop-filter:blur(10px); }.publish-action { padding:10px 15px; color:#fff; background:#171d35; border-color:#171d35; }
.repeatable-field { margin-top:14px; padding:13px; border:1px solid #e4e2f3; border-radius:12px; background:#fff; }.repeatable-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.repeatable-head > div { display:grid; gap:3px; color:#435067; font-size:13px; }.repeatable-list { display:grid; gap:8px; margin-top:11px; }.repeatable-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; padding:9px; border:1px solid #e5e8ef; border-radius:10px; background:#fafbfe; }.repeatable-model-row { grid-template-columns:minmax(120px,.8fr) minmax(160px,1.3fr) 110px auto; }.repeatable-mode-row { grid-template-columns:minmax(130px,.8fr) minmax(180px,1.3fr) auto; }.repeatable-row label { display:grid; gap:5px; }.repeatable-row input { width:100%; min-width:0; border:1px solid #d9deea; border-radius:9px; padding:10px 11px; color:#172238; background:#fff; outline-color:#7067ea; }.repeatable-delete { height:38px; border:1px solid #efd8de; border-radius:8px; padding:0 11px; color:#b94058; background:#fff6f7; font-size:12px; font-weight:750; }.repeatable-delete:disabled { opacity:.35; cursor:not-allowed; }
.feed-card-editor { display:grid; grid-template-columns:34px minmax(160px,1.2fr) minmax(100px,.7fr) minmax(130px,.8fr) minmax(110px,.7fr); gap:8px; align-items:end; padding:11px; border:1px solid #e2e6ef; border-radius:11px; background:#fafbfe; }.feed-card-number { align-self:center; color:#7067e9; font-size:11px; font-weight:850; }.feed-card-editor label { display:grid; gap:5px; }.feed-card-editor input,.feed-card-editor select { width:100%; min-width:0; height:38px; border:1px solid #d9deea; border-radius:8px; padding:0 10px; color:#22314b; background:#fff; outline-color:#7067ea; }.feed-card-editor .feed-prompt-field { grid-column:2 / -2; }
.feed-card-editor { display:block; padding:0; }.feed-card-editor > summary { display:flex; align-items:center; gap:10px; padding:11px 12px; cursor:pointer; list-style:none; }.feed-card-editor > summary > span:nth-child(2) { display:grid; gap:2px; }.feed-card-editor > summary b { color:#263552; font-size:12px; }.feed-card-editor > summary small { color:#8a93a2; font-size:10px; }.feed-card-editor > summary em { margin-left:auto; color:#6d63e6; font-size:10px; font-style:normal; }.feed-card-editor[open] > summary { border-bottom:1px solid #e7e9ef; background:#fff; }.feed-card-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; }.feed-card-fields label { display:grid; gap:5px; }.feed-card-fields input,.feed-card-fields select { width:100%; min-width:0; height:38px; border:1px solid #d9deea; border-radius:8px; padding:0 10px; color:#22314b; background:#fff; outline-color:#7067ea; }.feed-card-fields .feed-wide,.feed-card-fields .feed-media-field { grid-column:1 / -1; }.upload-control { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }.upload-button { display:grid!important; place-items:center; height:38px; border-radius:8px; padding:0 12px; color:#5b52dc; background:#eeecff; font-size:11px; font-weight:750; cursor:pointer; }.upload-button input { display:none; }.feed-media-field i { min-height:14px; color:#6a7485; font-size:10px; font-style:normal; }.feed-card-actions { display:flex; justify-content:flex-end; gap:7px; align-items:center; }.empty-inline { padding:24px; border:1px dashed #d9deea; border-radius:10px; text-align:center; color:#8a93a2; font-size:11px; background:#fafbfe; }
.page-map { padding:15px; border:1px solid #e1e5ef; border-radius:15px; background:linear-gradient(135deg,#fbfcff,#f6f5ff); }.page-map-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:11px; }.page-map-head > div { display:grid; gap:4px; }.page-map-head strong { color:#263552; font-size:14px; }.page-map-head small { color:#7a8495; font-size:11px; }.page-map-head > span { flex:0 0 auto; border-radius:99px; padding:5px 9px; color:#5e55d4; background:#eeecff; font-size:10px; font-weight:750; }.page-map-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.page-map-item { display:flex; align-items:center; gap:9px; min-width:0; padding:10px; border:1px solid #e2e5ee; border-radius:11px; text-align:left; color:#46536b; background:#fff; transition:.18s ease; }.page-map-item:hover,.page-map-item.active { border-color:#8f87ed; color:#463bc0; background:#f6f4ff; box-shadow:0 5px 14px #6d63e61a; }.page-map-number { display:grid; place-items:center; flex:0 0 28px; height:28px; border-radius:8px; color:#655bea; background:#eeecff; font-size:10px; font-weight:850; }.page-map-item > span:nth-child(2) { display:grid; gap:3px; min-width:0; }.page-map-item b { overflow:hidden; color:inherit; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.page-map-item small { overflow:hidden; color:#8a93a2; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.page-map-item em { margin-left:auto; flex:0 0 auto; border-radius:99px; padding:3px 6px; color:#218458; background:#e8f8f0; font-size:9px; font-style:normal; }.page-map-item:not(.active) em { color:#8790a0; background:#f0f2f6; }.section-editor-card.is-collapsed .section-editor-body { display:none; }.section-editor-card.is-collapsed header { border-bottom:0; }.section-editor-card[data-section-card] { scroll-margin-top:18px; }.section-location { color:#7e8797; }.section-edit-toggle { min-width:42px; color:#5b52dc; background:#f8f7ff; }
.page-map-groups { display:grid; gap:12px; }.page-map-group { display:grid; gap:7px; }.page-map-group h4 { margin:0; color:#686f82; font-size:10px; font-weight:800; letter-spacing:.04em; }.page-map-group .page-map-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
.page-builder-panel { display:grid; grid-template-columns:minmax(460px,1fr) minmax(390px,460px); gap:16px; align-items:start; overflow:visible; }.page-builder-panel .page-editor-title { grid-column:1 / -1; }.page-builder-panel #page-editor-form { grid-column:1; min-width:0; }.builder-guide { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px; border:1px solid #e5e2fb; border-radius:14px; background:#faf9ff; }.builder-guide span { display:flex; align-items:center; gap:7px; color:#657087; font-size:10px; line-height:1.4; }.builder-guide b { display:grid; place-items:center; flex:0 0 22px; height:22px; border-radius:7px; color:#fff; background:#6c62e8; box-shadow:0 5px 12px #6c62e83a; }.section-editor-card.is-active { border-color:#8d84f0; box-shadow:0 0 0 3px #766bea12,0 12px 26px #2634540f; }.section-editor-card.is-active header { background:linear-gradient(90deg,#f7f5ff,#fff); }.page-live-preview { position:sticky; top:18px; grid-column:2; overflow:hidden; border:1px solid #dfe4ed; border-radius:16px; background:#f7f8fb; box-shadow:0 16px 38px #26345417; }.preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; border-bottom:1px solid #e0e4ec; background:#fff; }.preview-toolbar > div:first-child { display:grid; gap:3px; }.preview-toolbar small { color:#e55d26; font-weight:750; }.preview-locator-tip { padding:8px 13px; color:#9b4a27; background:linear-gradient(90deg,#fff3eb,#fff9f5); border-bottom:1px solid #f2d5c6; font-size:10px; animation:locator-tip 1.6s ease-in-out infinite; }.preview-locator-tip b { color:#eb5420; }.preview-devices { display:flex; gap:4px; padding:3px; border-radius:9px; background:#f1f3f7; }.preview-devices button { border:0; border-radius:7px; padding:6px 8px; color:#778196; background:transparent; font-size:10px; }.preview-devices button.active { color:#5d54d4; background:#fff; box-shadow:0 2px 7px #2d38551c; }.preview-address { display:flex; align-items:center; gap:7px; height:30px; padding:0 12px; border-bottom:1px solid #22252e; color:#8d929d; background:#17191f; font:10px Consolas,monospace; }.preview-address span { width:7px; height:7px; border-radius:50%; background:#41c889; }.preview-stage { position:relative; height:720px; overflow:hidden; background:#090a0f; }.preview-stage iframe { position:absolute; top:0; border:0; background:#090a0f; transform-origin:top left; }.preview-stage[data-device="desktop"] iframe { left:0; width:1280px; height:1940px; transform:scale(.36); }.preview-stage[data-device="tablet"] iframe { left:0; width:820px; height:1240px; transform:scale(.56); }.preview-stage[data-device="mobile"] iframe { left:50%; width:390px; height:720px; transform:translateX(-50%); }.preview-note { margin:0; padding:11px 14px; border-top:1px solid #e1e5ed; color:#7b8597; background:#fff; font-size:10px; line-height:1.5; }@keyframes locator-tip { 0%,100% { background-color:#fff9f5; } 50% { background-color:#ffe8dc; } }
.navigation-workbench { display:grid; grid-template-columns:minmax(300px,390px) minmax(620px,1fr); gap:18px; align-items:start; }.navigation-preview-panel,.navigation-editor-panel { min-width:0; border:1px solid #e1e6ef; border-radius:18px; background:#fff; }.navigation-preview-panel { position:sticky; top:18px; padding:20px; overflow:visible; }.navigation-preview-panel h3 { margin:8px 0 6px; }.navigation-preview-panel p { margin:0 0 18px; color:#7a8495; font-size:12px; line-height:1.6; }.nav-preview-shell { position:relative; width:230px; min-height:620px; padding:20px 12px; border-radius:16px; color:#fff; background:#0b0c11; box-shadow:0 20px 45px #11182f30; }.nav-preview-brand { margin:0 12px 20px; font-size:25px; font-weight:900; letter-spacing:-.06em; }.nav-preview-brand span { color:#ff4c0b; font-size:14px; }.nav-preview-group { margin-top:14px; }.nav-preview-group > small { display:block; margin:0 12px 6px; color:#ffffff4a; font-size:10px; }.nav-preview-item { position:relative; }.nav-preview-item > a { display:flex; align-items:center; gap:10px; min-height:39px; padding:0 11px; border-radius:11px; color:#ffffffb8; text-decoration:none; font-size:13px; }.nav-preview-item > a:hover,.nav-preview-item.has-mega:hover > a { color:#ff6937; background:linear-gradient(90deg,#ff4c0b22,transparent); }.nav-preview-item > a b { width:18px; text-align:center; color:inherit; font-size:15px; }.nav-preview-item > a em { margin-left:auto; padding:2px 5px; border-radius:4px; color:#ff7a4d; background:#ff4c0b1f; font-size:8px; font-style:normal; }.nav-preview-item > a i { margin-left:auto; font-style:normal; }.nav-preview-mega { position:absolute; z-index:5; top:-8px; left:206px; display:none; width:max-content; min-width:520px; grid-template-columns:repeat(3,minmax(140px,1fr)); gap:22px; padding:22px; border:1px solid #ffffff17; border-radius:0 16px 16px 16px; background:#15161bef; box-shadow:22px 24px 50px #050508aa; backdrop-filter:blur(18px); }.nav-preview-item.has-mega:hover .nav-preview-mega { display:grid; }.nav-preview-mega section { min-width:140px; }.nav-preview-mega section > strong { display:block; margin-bottom:10px; color:#ffffff66; font-size:11px; }.nav-preview-mega section > a { display:flex; align-items:center; gap:8px; padding:7px 0; color:#ffffffc2; text-decoration:none; font-size:11px; }.nav-preview-mega section > a:hover { color:#ff6633; }.nav-preview-mega section > a b { width:18px; text-align:center; }.navigation-editor-panel { padding:18px; }.navigation-legend { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }.navigation-legend > div { display:flex; align-items:center; gap:8px; padding:11px; border:1px solid #e7e9f1; border-radius:11px; color:#536078; font-size:11px; }.level-chip { display:inline-grid; place-items:center; min-width:36px; height:22px; padding:0 7px; border-radius:6px; font-size:10px; font-weight:850; white-space:nowrap; }.level-one { color:#be3c13; background:#fff0e9; }.level-two { color:#5a50ce; background:#efedff; }.level-three { color:#177655; background:#e9f8f1; }.nav-group-stack { display:grid; gap:15px; }.nav-group-editor { overflow:hidden; border:1px solid #dde2ec; border-radius:14px; background:#f7f9fc; }.nav-group-editor > header { display:flex; align-items:end; gap:12px; padding:13px 14px; border-bottom:1px solid #e4e8f0; background:#eef2f8; }.nav-group-editor > header label { flex:1; color:#536078; font-size:11px; font-weight:800; }.nav-group-editor input,.nav-group-editor select { min-width:0; height:36px; border:1px solid #d8deea; border-radius:8px; padding:0 9px; color:#263650; background:#fff; font:12px inherit; outline-color:#746ae8; }.nav-group-editor > header input { display:block; width:100%; margin-top:6px; }.nav-first-stack { display:grid; gap:10px; padding:12px; }.nav-first-editor { overflow:hidden; border:1px solid #e0e4ed; border-radius:12px; background:#fff; }.nav-first-head { display:grid; grid-template-columns:auto 105px minmax(120px,1fr) minmax(120px,1fr) 90px auto auto; gap:7px; align-items:center; padding:10px; }.nav-column-stack { display:grid; gap:8px; padding:0 10px 10px 52px; }.nav-column-editor { border-left:3px solid #dcd8ff; border-radius:0 9px 9px 0; background:#f8f7ff; }.nav-column-head { display:grid; grid-template-columns:auto minmax(130px,1fr) auto; gap:8px; align-items:center; padding:9px; }.nav-leaf-stack { display:grid; gap:6px; padding:0 9px 9px 40px; }.nav-leaf-editor { display:grid; grid-template-columns:auto 100px minmax(120px,1fr) minmax(120px,1fr) auto auto; gap:7px; align-items:center; padding:7px; border:1px solid #e1ede7; border-radius:9px; background:#fff; }.mini-check { display:flex; align-items:center; gap:4px; color:#6f7a8d; font-size:10px; white-space:nowrap; }.mini-check input { width:14px; height:14px; accent-color:#655bea; }.nav-row-actions { display:flex; gap:4px; }.nav-row-actions button { min-width:28px; height:28px; border:1px solid #d8deea; border-radius:7px; color:#5c62a4; background:#fff; font-size:11px; }.nav-row-actions button:disabled { opacity:.35; cursor:not-allowed; }.nav-row-actions button.danger { color:#b93b53; }.nav-add-row,.nav-add-group { min-height:34px; border:1px dashed #bbb5f0; border-radius:9px; color:#5d54cf; background:#f5f3ff; font-size:11px; font-weight:750; }.nav-add-row.secondary { margin-left:0; }.nav-add-group { width:100%; margin-top:12px; min-height:42px; }.navigation-editor-panel .page-editor-actions { grid-column:auto; }
@media (max-width:1050px) { .page-builder-panel { grid-template-columns:1fr; }.page-builder-panel #page-editor-form,.page-live-preview { grid-column:1; }.page-live-preview { position:relative; top:auto; }.preview-stage[data-device="desktop"] iframe { transform:scale(.5); } }

.template-visual-workbench { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(500px,1.3fr); gap:16px; margin-bottom:16px; padding:16px; border:1px solid #e1e4ee; border-radius:18px; background:linear-gradient(135deg,#fbfaff,#f5f7fc); }.template-visual-copy { padding:12px; }.template-visual-copy h3 { margin:8px 0 6px; font-size:20px; color:#14213d; }.template-visual-copy p { color:#748097; font-size:12px; line-height:1.7; }.template-visual-legend { display:grid; gap:8px; margin-top:22px; }.template-visual-legend span { display:flex; align-items:center; gap:9px; color:#56627a; font-size:11px; }.template-visual-legend b { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; color:#fff; background:#6c62e8; box-shadow:0 6px 14px #6c62e83a; }.template-category-guide { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }.template-category-guide .badge { display:inline-flex; align-items:center; gap:5px; color:#5f58c6; background:#efedff; }.template-category-guide small { color:#8f94a7; font-size:8px; }.template-visual-preview { overflow:hidden; border:1px solid #dfe4ed; border-radius:14px; background:#090a0f; box-shadow:0 16px 35px #2634541c; }.template-visual-preview iframe { display:block; width:1280px; height:1100px; border:0; transform:scale(.48); transform-origin:top left; }.template-visual-preview { height:545px; }.template-preview-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }.template-page-settings { margin-bottom:16px; }.template-navigation-list { display:grid; gap:8px; margin-top:11px; }.template-navigation-row { display:grid; grid-template-columns:minmax(120px,1fr) minmax(130px,1fr) 78px auto 34px 34px auto; gap:7px; align-items:center; padding:9px; border:1px solid #e2e6ef; border-radius:10px; background:#fafbfe; }.template-navigation-row input { width:100%; min-width:0; height:37px; border:1px solid #d9deea; border-radius:8px; padding:0 9px; color:#263650; background:#fff; outline-color:#7067ea; }.template-creator-settings { padding:13px; border:1px solid #e2e6ef; border-radius:12px; background:#fafbfe; }
@media (max-width:1100px) { .template-visual-workbench { grid-template-columns:1fr; }.template-visual-preview { height:620px; }.template-visual-preview iframe { transform:scale(.55); } }
@media (max-width:1100px) { .template-navigation-row { grid-template-columns:1fr 1fr 80px auto; }.template-navigation-row .icon-action,.template-navigation-row .danger { justify-self:start; } }
@media (max-width:1150px) { .navigation-workbench { grid-template-columns:1fr; }.navigation-preview-panel { position:relative; top:auto; }.nav-first-head { grid-template-columns:auto 100px 1fr 1fr; }.nav-leaf-editor { grid-template-columns:auto 95px 1fr 1fr; }.feed-card-editor { grid-template-columns:34px 1fr 1fr; }.feed-card-editor .feed-prompt-field { grid-column:2 / -1; } }
@media (max-width:900px) { .section-fields { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) { .login-page { grid-template-columns:1fr; }.login-intro { padding:34px; min-height:260px; }.login-intro h1 { font-size:40px; margin:30px 0 8px; }.login-note { display:none; }.login-panel { margin:0; border-radius:26px 26px 0 0; padding:38px 24px; }.shell { grid-template-columns:1fr; }.sidebar { display:none; }.topbar,.content { padding-left:20px; padding-right:20px; }.cards,.model-preset-grid,.section-fields,.visual-settings-grid,.navigation-legend,.repeatable-model-row,.repeatable-mode-row,.feed-card-editor,.page-map-items { grid-template-columns:1fr; }.feed-card-number { display:none; }.feed-card-editor .feed-prompt-field { grid-column:auto; }.section-toolbar,.section-add,.page-editor-actions,.repeatable-head { align-items:stretch; flex-direction:column; }.page-map-head { flex-direction:column; }.page-map-head > span { align-self:flex-start; }.midjourney-note { align-items:flex-start; flex-direction:column; gap:5px; }.nav-preview-shell { width:100%; }.nav-preview-mega { position:static; width:100%; min-width:0; grid-template-columns:1fr; border-radius:12px; }.nav-first-head,.nav-column-head,.nav-leaf-editor { grid-template-columns:1fr; }.nav-column-stack,.nav-leaf-stack { padding-left:10px; } }
@media (max-width:760px) { .builder-guide { grid-template-columns:1fr; } }
.home-template-manager { overflow:visible; }.home-category-list,.home-template-list { display:grid; gap:9px; }.home-category-row { display:grid; grid-template-columns:minmax(130px,1fr) minmax(150px,1fr) 90px auto auto auto; gap:8px; align-items:center; padding:10px; border:1px solid #e4e7ef; border-radius:11px; background:#fafbfe; }.home-category-row input,.home-add-row input,.home-template-fields input,.home-template-fields select { min-width:0; height:38px; border:1px solid #d9deea; border-radius:8px; padding:0 10px; color:#263650; background:#fff; outline-color:#7067ea; }.home-category-row label,.home-template-fields label { color:#58657b; font-size:11px; font-weight:750; }.home-category-row label { display:flex; align-items:center; gap:6px; white-space:nowrap; }.home-add-row { display:grid; grid-template-columns:1fr 1fr 90px auto; gap:8px; margin-top:12px; padding-top:12px; border-top:1px dashed #dfe3eb; }.home-template-editor { overflow:hidden; border:1px solid #e1e5ee; border-radius:12px; background:#fafbfe; }.home-template-editor > summary { display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer; list-style:none; background:#fff; }.home-template-editor > summary span { display:grid; gap:3px; }.home-template-editor > summary b { color:#24334f; font-size:13px; }.home-template-editor > summary small { color:#8a93a3; font-size:10px; }.home-template-editor > summary em { margin-left:auto; color:#6258d4; font-size:10px; font-style:normal; }.home-template-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; padding:14px; border-top:1px solid #e8ebf1; }.home-template-fields.is-hidden { display:none; }.home-template-fields label { display:grid; gap:6px; }.home-template-fields .wide { grid-column:1 / -1; }.home-template-fields .mini-check { display:flex; align-items:center; }.home-template-actions { display:flex; justify-content:flex-end; gap:8px; }.home-template-list { margin-top:13px; }
.home-template-actions { align-items:center; }.home-upload-status,.home-save-status { min-height:15px; color:#6258d4; font-size:10px; font-style:normal; }.home-save-status { margin-right:auto; }.upload-button[data-uploading="true"] { cursor:wait; opacity:.62; pointer-events:none; }
.home-template-section-settings { display:grid; grid-template-columns:minmax(260px,1fr) auto auto auto; align-items:end; gap:12px; }.home-template-section-settings > label:first-child { display:grid; gap:6px; color:#58657b; font-size:11px; font-weight:750; }.home-template-section-settings input[type="text"],.home-template-section-settings input:not([type]) { min-width:0; height:38px; border:1px solid #d9deea; border-radius:8px; padding:0 10px; color:#263650; background:#fff; }.home-template-section-settings .mini-check { display:flex; align-items:center; gap:6px; min-height:38px; color:#58657b; font-size:11px; font-weight:750; }
.home-category-tabs { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }.home-category-tab { position:relative; display:flex; min-height:64px; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:11px 14px; border:1px solid #dfe3ed; border-radius:12px; background:#fafbfe; color:#263650; text-align:left; cursor:pointer; transition:.18s ease; }.home-category-tab:hover { border-color:#8a80f0; transform:translateY(-1px); }.home-category-tab.active { border-color:#695ee8; background:linear-gradient(135deg,#f0eeff,#faf9ff); box-shadow:0 8px 22px rgba(105,94,232,.12); }.home-category-tab span { font-size:13px; font-weight:800; }.home-category-tab small { color:#8791a3; font-size:10px; }.home-category-tab em { position:absolute; top:8px; right:8px; padding:2px 6px; border-radius:999px; background:#f0f1f5; color:#8a93a3; font-size:9px; font-style:normal; }.home-category-workspace { padding:0; overflow:hidden; }.home-category-workspace-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px 16px; background:linear-gradient(135deg,#f8f7ff,#fff); border-bottom:1px solid #e6e8ef; }.home-category-workspace-head h3 { margin:4px 0 3px; color:#1c2b48; font-size:20px; }.home-category-workspace-head p { margin:0; color:#7c8799; font-size:11px; }.home-category-workspace-head .eyebrow { color:#665be1; font-size:9px; font-weight:850; letter-spacing:.12em; }.home-category-settings { display:grid; grid-template-columns:minmax(160px,1.2fr) minmax(160px,1fr) 88px auto auto auto; align-items:end; gap:9px; padding:14px 24px; border-bottom:1px solid #e8ebf1; background:#fff; }.home-category-settings > label:not(.mini-check) { display:grid; gap:6px; color:#58657b; font-size:10px; font-weight:750; }.home-category-settings input { min-width:0; height:38px; border:1px solid #d9deea; border-radius:8px; padding:0 10px; color:#263650; background:#fff; }.home-category-settings .mini-check { display:flex; align-items:center; gap:6px; min-height:38px; white-space:nowrap; color:#58657b; font-size:10px; font-weight:750; }.home-category-uploader { margin:16px 24px 0; border:1px solid #ddd9ff; border-radius:12px; background:#f9f8ff; }.category-upload-title { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#263650; }.category-upload-title span { color:#7c8799; font-size:10px; font-weight:500; }.home-category-workspace .home-template-list { padding:16px 24px 24px; }.home-template-thumb { width:58px; height:44px; flex:0 0 58px; overflow:hidden; display:grid; place-items:center; border-radius:8px; background:#eceef4; color:#8b94a5; font-size:10px; }.home-template-thumb img { width:100%; height:100%; object-fit:cover; }.home-template-empty { padding:30px; border:1px dashed #d9deea; border-radius:12px; color:#8a93a3; text-align:center; font-size:12px; background:#fafbfe; }
.template-setting-notice { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:12px 0; padding:13px 14px; border:1px solid #dcd8ff; border-radius:11px; background:#f5f3ff; }.template-setting-notice div { display:grid; gap:4px; }.template-setting-notice b { color:#302967; font-size:12px; }.template-setting-notice span { color:#706b86; font-size:10px; }.template-setting-notice button { flex:none; }
@media (max-width:900px) { .home-category-row,.home-add-row,.home-template-fields,.home-template-section-settings,.home-category-settings { grid-template-columns:1fr; }.home-template-fields .wide { grid-column:auto; }.template-setting-notice,.home-category-workspace-head { align-items:flex-start; flex-direction:column; } }

/* Keep file inputs keyboard- and browser-automation-accessible while retaining the compact upload button. */
.upload-button { position:relative; overflow:hidden; }
.upload-button:hover { background:#e4e0ff; }
.upload-button:focus-within { outline:2px solid #746ae8; outline-offset:2px; }
.upload-button input { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; cursor:pointer; }
.video-suite-admin{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.7fr);gap:20px;align-items:start}.video-suite-editor{min-width:0}.video-suite-editor h2{font-size:17px;margin:0 0 18px}.video-suite-preview{position:sticky;top:24px;min-width:0;border:1px solid #e3e7ee;background:#fff;border-radius:14px;overflow:hidden}.video-suite-preview iframe{display:block;border:0;width:100%;height:760px;background:#090a0f}.video-suite-preview>p{padding:0 15px}.video-suite-switches,.video-suite-row-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px}.video-suite-save{position:sticky;bottom:15px;display:flex;align-items:center;gap:15px;box-shadow:0 8px 30px #1e293b16;z-index:5}.video-suite-save span{font-size:12px}.video-suite-row-actions a{text-decoration:none}.video-suite-row-actions button:disabled{opacity:.35;cursor:default}@media(max-width:1450px){.video-suite-admin{grid-template-columns:minmax(0,1fr)}.video-suite-preview{position:static}.video-suite-preview iframe{height:680px}}@media(max-width:700px){.video-suite-save{flex-wrap:wrap}.video-suite-preview iframe{height:560px}}
.video-form-settings{border:1px solid #e2e6ef;border-radius:12px;padding:18px;margin:12px 0}.video-form-settings legend{font-size:13px;font-weight:600;color:#6c55b7;padding:0 8px}.video-form-settings h4{font-size:13px;margin:10px 0}.video-form-subitem{border:1px solid #e3e7ed;background:#f8f9fc;border-radius:9px;padding:14px;margin:10px 0}