*{box-sizing:border-box}
:root{
  --bg:#f5f1ea;--paper:#fffdf9;--ink:#203046;--muted:#6f7d90;--line:#ded8ce;
  --blue:#4778e8;--blue-soft:#eef4ff;--violet:#7b68d9;--violet-soft:#f2efff;
  --mint:#39a888;--mint-soft:#eaf8f3;--sand:#e9b85e;--sand-soft:#fff6e4;
  --rose:#d96782;--rose-soft:#fff0f4;--cyan:#38a8c8;--cyan-soft:#eaf9fd;
  --shadow:0 18px 45px rgba(56,66,82,.10);--shadow-sm:0 8px 22px rgba(56,66,82,.08)
}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink)}
body{padding:18px;background-image:radial-gradient(circle at 12% 2%,rgba(71,120,232,.10),transparent 24%),radial-gradient(circle at 90% 14%,rgba(123,104,217,.10),transparent 26%),linear-gradient(rgba(255,255,255,.34) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.34) 1px,transparent 1px);background-size:auto,auto,32px 32px,32px 32px}
.lux-bg{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.lux-bg i{position:absolute;border-radius:50%;filter:blur(35px);opacity:.22}.lux-bg i:nth-child(1){width:360px;height:360px;background:#9dc0ff;top:-130px;right:15%}.lux-bg i:nth-child(2){width:280px;height:280px;background:#d3c5ff;bottom:7%;left:-80px}.lux-bg i:nth-child(3){width:220px;height:220px;background:#bfe9dc;top:45%;right:-70px}
.app-shell{max-width:1760px;margin:auto}
.topbar,.panel,.mode-panel{background:rgba(255,253,249,.94);border:1px solid rgba(205,197,185,.75);box-shadow:var(--shadow)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;border-radius:26px;margin-bottom:16px;overflow:hidden;position:relative}.topbar:after{content:"";position:absolute;inset:auto 0 0;height:4px;background:linear-gradient(90deg,var(--blue),var(--violet),var(--mint),var(--sand))}
.brand-wrap{display:flex;align-items:center;gap:16px}.brand-logo-shell{width:94px;height:94px;border-radius:24px;padding:6px;background:#fff;border:1px solid #ddd6cb;box-shadow:var(--shadow-sm);overflow:hidden;flex:0 0 auto}.brand-logo-shell img{width:100%;height:100%;object-fit:cover;border-radius:18px}.eyebrow{font-size:11px;letter-spacing:2.4px;color:var(--blue);font-weight:800;margin-bottom:5px}.brand-copy h1{margin:0;font-size:34px;line-height:1}.brand-copy h1 span{color:var(--blue)}.brand-copy p{margin:8px 0 0;color:var(--muted);line-height:1.7;font-size:13px}.header-status{display:flex;flex-direction:column;gap:9px;align-items:flex-start}.edition-pill,.local-badge{border-radius:999px;padding:9px 13px;font-size:11px;font-weight:700}.edition-pill{background:var(--blue-soft);border:1px solid #c9d8ff;color:#3f68c7;letter-spacing:1.6px}.local-badge{background:var(--mint-soft);border:1px solid #c7e9dc;color:#247a61}.local-badge span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);margin-left:7px;box-shadow:0 0 0 5px rgba(57,168,136,.12)}
.mode-panel{border-radius:24px;padding:16px 18px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:18px}.mode-copy{max-width:620px}.mode-kicker{display:inline-block;color:var(--violet);background:var(--violet-soft);border-radius:999px;padding:5px 9px;font-size:10px;font-weight:bold;margin-bottom:7px}.mode-copy h2{margin:0 0 5px;font-size:20px}.mode-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:430px}.mode-btn{border:1px solid #ddd5ca;border-radius:18px;background:#fffaf4;padding:12px 16px;color:var(--ink);cursor:pointer;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;text-align:right;column-gap:10px;transition:.2s}.mode-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.mode-btn.active{border-color:#a9bff5;background:linear-gradient(135deg,#edf3ff,#f6f1ff);box-shadow:0 0 0 3px rgba(71,120,232,.08)}.mode-icon{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--blue-soft);color:var(--blue);font-size:19px}.mode-btn strong{font-size:13px}.mode-btn small{font-size:10px;color:var(--muted);margin-top:2px}
.workspace{display:grid;grid-template-columns:450px minmax(0,1fr);gap:16px;align-items:start}.panel{border-radius:24px}.sidebar{padding:16px;max-height:calc(100vh - 165px);overflow:auto;position:sticky;top:14px}.sidebar::-webkit-scrollbar{width:9px}.sidebar::-webkit-scrollbar-thumb{background:#c9c1b7;border-radius:10px;border:2px solid #f7f3ed}
.control-section{padding:14px;border:1px solid #e4ddd4;border-radius:18px;margin-bottom:12px;background:#fff}.control-section:nth-of-type(1){background:var(--cyan-soft);border-color:#cbeaf3}.control-section:nth-of-type(2){background:var(--violet-soft);border-color:#ddd4ff}.control-section:nth-of-type(3){background:var(--sand-soft);border-color:#f2dfb5}.control-section.typography{background:var(--rose-soft);border-color:#f3ced8}.control-section.options{background:var(--mint-soft);border-color:#cbe9df}.mode-hidden{display:none!important}.section-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}.section-head>b{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#fff;border:1px solid rgba(70,80,95,.12);color:var(--blue);font-size:12px;box-shadow:var(--shadow-sm)}.section-head h2{margin:0 0 2px;font-size:14px}.section-head small{color:var(--muted);font-size:10px}
.upload-box{min-height:92px;border:1.5px dashed #aac0e6;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;background:rgba(255,255,255,.72);transition:.2s}.upload-box:hover,.upload-box.drag{border-color:var(--blue);background:#fff;transform:translateY(-1px)}.upload-box.compact{min-height:78px}.upload-icon{font-size:22px;color:var(--blue)}.upload-box strong{font-size:13px}.upload-box span{font-size:10px;color:var(--muted)}.file-chip{margin-top:8px;padding:9px 10px;background:rgba(255,255,255,.78);border:1px solid #e2dbd1;border-radius:10px;font-size:11px;overflow:hidden;text-overflow:ellipsis}.muted{color:#8994a3}.hidden{display:none!important}
.grid{display:grid;gap:9px}.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:1fr .8fr 1.3fr;margin-top:8px}label>span{display:block;font-size:10px;color:#677689;margin-bottom:5px}input,select,button{font-family:inherit}input[type=number],select{width:100%;height:39px;border-radius:11px;border:1px solid #d8d1c7;background:#fff;color:var(--ink);padding:0 10px;outline:none;transition:.18s}input[type=number]:focus,select:focus{border-color:#8caaf0;box-shadow:0 0 0 3px rgba(71,120,232,.10)}input:disabled,select:disabled{background:#f2eee7;color:#9ca4ae;cursor:not-allowed}input[type=color]{width:100%;height:39px;background:#fff;border:1px solid #d8d1c7;border-radius:11px;padding:4px}
.image-repeat-options{background:#fff;border:1px solid #eadcc0;border-radius:15px;padding:10px;margin:8px 0 10px}.feature-note{display:flex;align-items:flex-start;gap:9px;background:linear-gradient(135deg,#f4f8ff,#fbf8ff);border:1px solid #dfe6fa;border-radius:12px;padding:9px 10px;margin-bottom:9px}.feature-note>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--blue-soft);color:var(--blue)}.feature-note strong{display:block;font-size:11px}.feature-note small{display:block;color:var(--muted);font-size:9.5px;line-height:1.6;margin-top:2px}.smart-switch{background:#f7f4ef;border:1px solid #e3ddd5;border-radius:11px;padding:8px 10px;display:flex!important;align-items:center;justify-content:space-between;gap:8px}.switch-copy strong{font-size:10px;display:block}.switch-copy small{font-size:9px;color:var(--muted)}.auto-grid-summary,.export-summary{margin-top:9px;border-radius:11px;padding:9px 10px;font-size:10px;line-height:1.55}.auto-grid-summary{background:var(--blue-soft);border:1px solid #d6e1fb;color:#3e5f9d}.export-summary{background:#fff;border:1px solid #e0d9cf;color:#5d6b7d}.all-data-switch{margin-top:10px;background:#fff;border:1px solid #e1d9cd;border-radius:13px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}.all-data-switch .switch-copy strong{font-size:10.5px}.all-data-switch .switch-copy small{display:block;color:var(--muted);font-size:9px;line-height:1.5;margin-top:2px}
.toggle input{display:none}.toggle span{width:36px;height:20px;border-radius:999px;background:#c9c7c2;display:block;position:relative;cursor:pointer}.toggle span:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.18)}.toggle input:checked+span{background:var(--blue)}.toggle input:checked+span:after{left:19px}
.mini-table{margin-top:9px;border:1px solid #ddd6cc;border-radius:10px;overflow:hidden;font-size:10px;background:#fff}.mini-table .row{display:grid;grid-template-columns:1fr 1fr}.mini-table .row span{padding:6px 8px;border-bottom:1px solid #eee8df;direction:ltr;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-table .row.head{background:#f5f2ed;color:#51627a;font-weight:bold}
.field-editor{border:1px solid #ead8dd;background:rgba(255,255,255,.78);border-radius:14px;padding:10px;margin-bottom:9px}.field-editor.user-theme{box-shadow:inset 3px 0 var(--blue)}.field-editor.pass-theme{box-shadow:inset 3px 0 var(--violet)}.field-title{display:flex;justify-content:space-between;align-items:center}.field-title strong{font-size:12px}.check-row{display:flex;align-items:center;gap:7px;color:#4f6075;font-size:11px;margin:7px 0}.check-row input{accent-color:var(--blue)}
.actions{display:grid;grid-template-columns:1.6fr 1fr;gap:9px}.sticky-actions{position:sticky;bottom:-16px;background:linear-gradient(0deg,#fffdf9 72%,transparent);padding:16px 0 2px}.primary,.secondary,.tiny{border:0;border-radius:12px;cursor:pointer}.primary{height:48px;background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;font-weight:bold;box-shadow:0 10px 22px rgba(71,120,232,.22)}.primary:disabled{opacity:.42;cursor:not-allowed}.secondary{height:48px;background:#fff;border:1px solid #d9d1c6;color:#4f5e70}.tiny{min-width:34px;height:34px;background:#fff;border:1px solid #d9d1c6;color:#3d526e}
.main-area{min-width:0}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);padding:12px;margin-bottom:16px;gap:9px}.stats-row>div{border-radius:15px;padding:12px;border:1px solid transparent}.stats-row>div:nth-child(1){background:var(--blue-soft);border-color:#d6e2ff}.stats-row>div:nth-child(2){background:var(--mint-soft);border-color:#d0eadf}.stats-row>div:nth-child(3){background:var(--sand-soft);border-color:#f2dfb7}.stats-row>div:nth-child(4){background:var(--violet-soft);border-color:#ddd4ff}.stats-row span{display:block;color:var(--muted);font-size:10px;margin-bottom:5px}.stats-row strong{font-size:14px;color:#263951}.designer-grid{display:grid;grid-template-columns:minmax(330px,.42fr) minmax(520px,.58fr);gap:16px}.card-designer-panel,.preview-panel{padding:15px;min-height:590px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.panel-head h2{font-size:15px;margin:0 0 4px}.panel-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.6}.live-dot{font-size:10px;color:#24785f;background:var(--mint-soft);border:1px solid #c8e7dc;padding:6px 9px;border-radius:999px}.designer-stage{height:510px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:linear-gradient(145deg,#f2f5fa,#e9eef6);border:1px solid #d6dde7;overflow:hidden;padding:25px;position:relative}.designer-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(77,96,126,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(77,96,126,.055) 1px,transparent 1px);background-size:18px 18px}.designer-card{position:relative;z-index:1;max-width:100%;max-height:100%;background:#fff;box-shadow:0 20px 44px rgba(52,64,80,.18);overflow:hidden;user-select:none}.designer-card img{position:absolute;width:100%;height:100%;inset:0;object-fit:fill;display:none;pointer-events:none}.designer-empty{color:#8894a3;display:grid;place-items:center;width:340px;height:210px;background:#fff}.drag-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);padding:3px 5px;border-radius:5px;background:rgba(255,255,255,.86);border:1px dashed currentColor;cursor:grab;white-space:nowrap;direction:ltr;line-height:1}.drag-label.user{color:#276ee5}.drag-label.pass{color:#7352e8}.designer-size{text-align:center;color:#69788b;font-size:10px;margin-top:9px}.image-mode-hint{margin:8px auto 0;max-width:390px;text-align:center;padding:8px 10px;border-radius:11px;background:var(--blue-soft);color:#5270a7;font-size:10px;line-height:1.5}
.preview-wrap{height:510px;border-radius:18px;background:#ece8e1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px;position:relative;border:1px solid #ddd6cc}.preview-wrap canvas{display:none;box-shadow:0 18px 45px rgba(60,65,73,.20);background:#fff}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8793a2;gap:7px}.empty-state div{font-size:42px;color:#9cabbd}.page-nav{display:flex;gap:7px;align-items:center;direction:ltr}.page-nav span{font-size:11px;color:#69788b;min-width:55px;text-align:center}footer{text-align:center;color:#7c8795;font-size:10px;padding:15px 0 2px}
body[data-mode="image"] #designerPanel{border-top:4px solid #79a2ef}body[data-mode="hotspot"] #designerPanel{border-top:4px solid #b396ea}
@media(max-width:1260px){.workspace{grid-template-columns:410px minmax(0,1fr)}.designer-grid{grid-template-columns:1fr}.card-designer-panel,.preview-panel{min-height:auto}.designer-stage,.preview-wrap{height:430px}}
@media(max-width:920px){body{padding:9px}.topbar{align-items:flex-start;flex-direction:column}.brand-logo-shell{width:76px;height:76px}.brand-copy h1{font-size:28px}.mode-panel{flex-direction:column;align-items:stretch}.mode-switch{min-width:0}.workspace{display:block}.sidebar{position:relative;top:0;max-height:none;margin-bottom:13px}.stats-row{grid-template-columns:1fr 1fr}.designer-grid{display:block}.card-designer-panel{margin-bottom:13px}.grid.three{grid-template-columns:1fr 1fr}.designer-stage,.preview-wrap{height:380px}}
@media(max-width:560px){.brand-wrap{align-items:flex-start}.brand-logo-shell{width:64px;height:64px;border-radius:18px}.brand-copy h1{font-size:24px}.mode-switch{grid-template-columns:1fr}.grid.two,.grid.three{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr 1fr}}
/* V4 additions */
.template-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(92px,.6fr));align-items:end}.mini-action{height:40px!important;padding:0 12px}.danger-lite{border-color:#f4b8b8!important;color:#a93c3c!important;background:#fff5f5!important}.save-state-note{margin-top:9px;padding:9px 11px;border-radius:12px;background:#f4f8ff;color:#64748b;font-size:11px;border:1px solid #dce7f7}.advanced-map{margin-top:10px;border:1px solid #d9e4f2;border-radius:12px;background:#fbfdff;padding:8px 10px}.advanced-map summary{cursor:pointer;font-size:12px;font-weight:700;color:#34517a}.extra-map-grid{margin-top:10px}.data-health{margin-top:10px;padding:10px 12px;border-radius:12px;background:#fff9ea;border:1px solid #f2dda1;color:#705f2d;font-size:11px;line-height:1.7}.range-card{margin-top:10px;padding:11px;border:1px solid #d7e3f1;background:#fbfdff;border-radius:14px}.hygiene-grid{margin-top:6px}.smart-strategy{display:block;margin-top:10px}.extra-fields-stack{display:grid;gap:8px}.extra-field-row{display:grid;grid-template-columns:minmax(110px,1.35fr) .75fr .75fr .7fr 58px;gap:7px;align-items:end;padding:8px;border:1px solid #e1e8f0;border-radius:12px;background:#fff}.extra-field-row>input[type=number]{height:36px}.extra-field-row>input[type=color]{height:36px}.extra-fields-legend{display:grid;grid-template-columns:1.35fr .75fr .75fr .7fr 58px;gap:7px;color:#94a3b8;font-size:10px;margin-top:5px}.extra-fields-legend span:first-child{grid-column:2}.quality-info{margin-top:10px;padding:10px 12px;border-radius:12px;background:#eef7ff;border:1px solid #d4e8fb;color:#315f84;font-size:11px;line-height:1.6}.quality-info.warn{background:#fff4e8;border-color:#f5cf9c;color:#8a5a1d}.quality-info.good{background:#eefbf6;border-color:#cdeede;color:#247057}.quality-info.bad{background:#fff0f1;border-color:#f2c4c9;color:#9b3742}
@media(max-width:900px){.template-grid{grid-template-columns:1fr 1fr}.extra-field-row{grid-template-columns:1fr 1fr}.extra-fields-legend{display:none}}

/* V4.1 — page numbering & stability controls */
.page-number-card{margin-top:10px;padding:12px;border:1px solid #cfd8e7;border-radius:14px;background:linear-gradient(135deg,#fffdf8,#f4f7ff)}
.page-number-switch{margin:0 0 10px;padding:0;background:transparent;border:0}
.page-number-card .grid{margin-top:8px}
.export-warning{color:#8a4b08;background:#fff7df;border-color:#f1d596!important}

[hidden]{display:none!important}.uc-home{max-width:720px;margin:auto;padding:24px 18px 36px;color:#203046}.uc-welcome{text-align:center;margin:12px 0 26px}.uc-welcome img{display:block;width:140px;height:100px;object-fit:contain;margin:0 auto 12px}.uc-welcome>span{font-size:12px;color:#7352e8}.uc-welcome h1{font-size:26px;margin:8px 0}.uc-welcome p{font-size:14px;color:#6f7d90}.uc-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.uc-actions button{background:#fffdf9;border:1px solid #ded8ce;border-radius:18px;padding:20px 12px;text-align:right;min-height:100px;color:#203046;font-family:inherit}.uc-actions strong{display:block;font-size:16px}.uc-actions small{display:block;margin-top:8px;font-size:12px;color:#6f7d90}.uc-actions .uc-primary{background:#7352e8;color:white;border:0}.uc-actions .uc-primary small{color:#ede7ff}.uc-section-title{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.uc-section-title h2{font-size:20px}.uc-section-title span{border-radius:20px;background:#ede7ff;padding:6px 12px}.uc-project{display:flex;align-items:center;gap:10px;background:#fffdf9;border:1px solid #ded8ce;border-radius:16px;margin:10px 0;padding:12px}.uc-project img{width:56px;height:48px;object-fit:contain;border-radius:6px}.uc-project div{flex:1;min-width:0;overflow-wrap:anywhere}.uc-project small{display:block;margin-top:5px;color:#6f7d90;font-size:11px}.uc-project button,.uc-studio-bar button,.uc-dialog button{background:#eee8fc;color:#5d3db7;border:0;border-radius:10px;padding:10px 13px;font-family:inherit}.uc-studio-bar{display:flex;gap:8px;align-items:center;padding:10px 0;position:sticky;top:0;background:#f5f1ea;z-index:50}.uc-studio-bar strong{flex:1;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}.uc-offline{text-align:center;color:#6f7d90;font-size:12px;margin-top:22px}.uc-dialog{border:1px solid #ded8ce;border-radius:22px;padding:24px;max-width:90vw;width:420px;color:#203046;background:#fffdf9}.uc-dialog::backdrop{background:rgba(30,24,40,.6)}.uc-dialog canvas{width:100%;height:auto}.uc-dialog button{margin:6px}.uc-dialog p{font-size:13px;line-height:1.8}#ucNotice{color:#24785f;min-height:22px;text-align:center}@media(max-width:600px){.sidebar input,.sidebar select{font-size:14px}.sidebar label>span{font-size:12px}.control-section h2{font-size:16px}.uc-actions{gap:10px}.uc-project{gap:7px}.uc-project button{padding:9px}.uc-studio-bar button{padding:10px;font-size:12px}}