:root{--bg:#f7f5fb;--surface:#fff;--text:#26232d;--muted:#716a7d;--line:#ddd7e8;--primary:#6650a4;--primarySoft:#eee9ff;--danger:#b3261e;--shadow:0 10px 30px rgba(54,39,83,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 13px;cursor:pointer}
button.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px max(14px,calc((100vw - 1280px)/2));background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
header h1{margin:0;font-size:1.35rem}header small{font-size:.75rem;color:var(--muted)}header p{margin:3px 0 0;color:var(--muted);font-size:.83rem}.headerButtons{display:flex;gap:8px}
nav{display:flex;gap:4px;overflow:auto;padding:8px max(10px,calc((100vw - 1280px)/2));background:#fff;border-bottom:1px solid var(--line)}
.navBtn{white-space:nowrap;border:0;background:transparent}.navBtn.active{background:var(--primarySoft);color:var(--primary);font-weight:700}
main{max-width:1280px;margin:auto;padding:18px 14px 70px}.page{display:none}.page.active{display:block}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px}.panel h2{margin:0 0 8px;font-size:1.08rem}.panel p{margin:3px 0;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;text-align:left;box-shadow:var(--shadow)}.stat span{display:block;color:var(--muted);font-size:.8rem}.stat b{display:block;margin-top:4px;font-size:1.3rem}.stat.selected{background:var(--primarySoft);border-color:var(--primary)}
.searchbar{display:grid;grid-template-columns:1fr 220px;gap:10px;margin-bottom:14px}input,select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.itemGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:13px}.itemCard{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.itemCard button{width:100%;padding:0;border:0;border-radius:0;text-align:left}.thumb{height:180px;background:#ebe8f1;position:relative}.thumb img{width:100%;height:100%;object-fit:cover}.badge{position:absolute;top:9px;right:9px;padding:5px 8px;border-radius:999px;color:#fff;background:#777;font-size:.72rem}.owned{background:#2e7d32}.reserved{background:#1565c0}.wanted{background:#ad1457}.sold{background:#6a1b9a}.cardText{padding:12px}.cardText h3{margin:0 0 6px;font-size:1rem}.cardText p{margin:3px 0;color:var(--muted);font-size:.84rem}.cardBottom{display:flex;justify-content:space-between;margin-top:9px;font-size:.78rem}.empty{text-align:center;padding:60px;border:1px dashed #bbb3c8;border-radius:15px;color:var(--muted)}
.drop{min-height:190px;border:2px dashed #aca1bf;border-radius:15px;display:grid;place-content:center;text-align:center;gap:6px;background:#fbfaff}.drop.drag{background:var(--primarySoft);border-color:var(--primary)}
.workspaceHeader,.candidateHeader{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.rowButtons{display:flex;gap:8px;flex-wrap:wrap}
.sheetLayout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}.canvasPanel{padding:10px;position:sticky;top:118px}.registerPanel{position:sticky;top:118px}
#canvasScroller{max-height:72vh;overflow:auto;background:#28252e;border-radius:12px;padding:10px;touch-action:none}#sheetCanvas{display:block;background:#fff;cursor:crosshair;touch-action:none}.canvasHint{text-align:center;color:var(--muted);font-size:.8rem;margin-top:8px}
.selectionEmpty{padding:35px 10px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px}#cropPreview{width:100%;max-height:230px;object-fit:contain;background:#eee;border-radius:10px;margin-bottom:10px}
label{display:block;color:var(--muted);font-size:.8rem;margin-bottom:9px}.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.candidateButtons{display:flex;justify-content:space-between;gap:8px;margin-top:10px}
.commonFields{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px;margin:12px 0}.candidateList{display:grid;gap:10px}.candidate{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px}.candidate img{width:130px;height:100px;object-fit:contain;background:#eee;border-radius:8px}.candidate h3{margin:0 0 5px;font-size:.95rem}.candidate p{margin:2px 0;color:var(--muted);font-size:.82rem}.candidateActions{display:flex;flex-direction:column;gap:7px}
.budgetForm{display:grid;grid-template-columns:200px 220px auto;gap:10px;align-items:end}.backupButtons{display:flex;gap:8px;flex-wrap:wrap}.notice{margin-top:14px;background:#f5f1ff;border-radius:12px;padding:13px;color:var(--muted)}
dialog{width:min(820px,calc(100vw - 20px));max-height:calc(100vh - 20px);border:0;border-radius:18px;padding:0;box-shadow:0 30px 100px rgba(0,0,0,.3)}dialog::backdrop{background:rgba(20,17,25,.55)}#itemForm{padding:18px;overflow:auto}.dialogHead{display:flex;justify-content:space-between;align-items:center}.dialogHead h2{margin:0 0 12px}.dialogHead button{font-size:1.25rem;padding:5px 10px}.miniDrop{border:1px dashed #aaa0ba;border-radius:10px;text-align:center;padding:13px;margin-top:5px}.dialogPreview{max-width:250px;max-height:180px;border-radius:9px;margin-bottom:10px}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.formGrid .wide{grid-column:1/-1}.dialogActions{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;margin-top:14px}.danger{color:var(--danger);border-color:#efb5b2}
@media(max-width:900px){.sheetLayout{grid-template-columns:1fr}.canvasPanel,.registerPanel{position:static}.registerPanel{order:-1}.stats{grid-template-columns:repeat(2,1fr)}.stats.four{grid-template-columns:repeat(2,1fr)}.commonFields{grid-template-columns:1fr 1fr}.budgetForm{grid-template-columns:1fr}}
@media(max-width:650px){header{align-items:flex-start}.headerButtons{flex-direction:column}.searchbar{grid-template-columns:1fr}.itemGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspaceHeader,.candidateHeader{display:block}.rowButtons{margin-top:10px}.two{grid-template-columns:1fr}.candidate{grid-template-columns:95px 1fr}.candidate img{width:95px;height:85px}.candidateActions{grid-column:1/-1;flex-direction:row}.commonFields{grid-template-columns:1fr}.formGrid{grid-template-columns:1fr}.formGrid .wide{grid-column:auto}}
@media(max-width:430px){.itemGrid{grid-template-columns:1fr}}

.autoPanel{display:grid;grid-template-columns:1fr 150px 150px 190px;gap:12px;align-items:end}
.autoPanel>div span{display:block;color:var(--muted);font-size:.82rem;margin-top:5px}
@media(max-width:800px){.autoPanel{grid-template-columns:1fr 1fr}.autoPanel>div{grid-column:1/-1}}
@media(max-width:520px){.autoPanel{grid-template-columns:1fr}}

.historyCombo{display:grid;gap:6px}
.historySelect{padding:8px 10px;background:#f7f5fb;color:var(--muted);font-size:.78rem}
input[list]{background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}

.cropDialog{width:min(1180px,96vw);max-width:none;padding:0;border:0;border-radius:18px;overflow:hidden}
.cropDialog::backdrop{background:rgba(16,18,28,.72)}
.cropEditorShell{background:var(--bg);min-height:min(92vh,900px);display:flex;flex-direction:column}
.cropEditorHeader,.cropEditorFooter{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)}
.cropEditorFooter{border-top:1px solid var(--line);border-bottom:0;flex-wrap:wrap}
.cropEditorHeader h2{margin:0 0 3px}
.cropEditorHeader p{margin:0;color:var(--muted);font-size:.85rem}
.iconButton{font-size:1.6rem;line-height:1;width:42px;height:42px;padding:0}
.cropEditorBody{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;padding:14px;min-height:0;flex:1}
.cropCanvasWrap{position:relative;overflow:auto;background:#262936;border-radius:12px;display:flex;align-items:flex-start;justify-content:center;padding:18px;touch-action:none}
#cropCanvas{display:block;max-width:none;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.25);cursor:crosshair}
.cropEditorSide{align-self:start;position:sticky;top:0}
.cropPreview{width:100%;max-height:260px;object-fit:contain;background:#eee;border-radius:10px;border:1px solid var(--line)}
.cropCoords{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cropCoords label{font-size:.78rem;color:var(--muted)}
.cropCoords input{margin-top:4px}
.cropHelp{font-size:.78rem;line-height:1.6;color:var(--muted)}
.candidateActions{display:flex;gap:6px;flex-wrap:wrap}
.candidateActions button[data-crop]{font-weight:700}
@media(max-width:820px){
  .cropEditorBody{grid-template-columns:1fr}
  .cropEditorSide{position:static}
  .cropPreview{max-height:180px}
}

/* v6 mobile, markup and sync */
.syncStatusBox{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.syncStatusBox>div,.mobileAddress{background:#f7f5fb;border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:5px}
.syncStatusBox span{color:var(--muted)}
.toggleRow{display:flex!important;align-items:center;gap:9px;margin:14px 0}
.toggleRow input{width:auto}
.mobileAddress{margin-top:14px}
.mobileAddress code{overflow-wrap:anywhere;font-size:.9rem}
.markupDialog{width:min(1180px,97vw);max-width:none;padding:0;border:0;border-radius:18px;overflow:hidden}
.markupDialog::backdrop{background:rgba(16,18,28,.72)}
.markupShell{background:var(--bg);min-height:min(92vh,900px);display:flex;flex-direction:column}
.markupToolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)}
.markupToolbar label{display:flex;align-items:center;gap:6px;font-size:.82rem}
.markupToolbar input[type=color]{width:44px;height:36px;padding:2px}
.markupToolbar input[type=range]{width:110px}
.markupTool.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.markupBody{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;padding:14px;min-height:0;flex:1}
.markupCanvasWrap{overflow:auto;background:#262936;border-radius:12px;padding:16px;display:flex;justify-content:center;align-items:flex-start;touch-action:none}
#markupCanvas{display:block;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.28);touch-action:none;cursor:crosshair}
.markupHelp{align-self:start;position:sticky;top:0}
#markupPreview{width:100%;max-height:260px;object-fit:contain;background:#eee;border:1px solid var(--line);border-radius:10px}
.markupHelp p{font-size:.8rem;line-height:1.55;color:var(--muted)}
.markedBadge{display:inline-block;font-size:.72rem;background:#fff0f3;color:#c21f45;padding:3px 7px;border-radius:999px;margin-top:4px}

@media(max-width:760px){
  body{padding-bottom:76px}
  header{padding:12px}
  header>div:first-child p{display:none}
  header h1{font-size:1.15rem}
  header h1 small{display:block;font-size:.68rem;margin-top:2px}
  .headerButtons{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .headerButtons button{min-height:44px}
  nav{position:fixed;z-index:30;left:0;right:0;bottom:0;top:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:5px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(0,0,0,.08)}
  nav button{font-size:.69rem;padding:8px 3px;min-height:52px}
  main{padding:10px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .searchbar,.autoPanel,.sheetLayout,.formGrid,.commonFields,.budgetForm{grid-template-columns:1fr!important}
  .sheetLayout{display:block}
  .registerPanel{margin-top:10px}
  .candidateItem{grid-template-columns:82px 1fr!important}
  .candidateActions{grid-column:1/-1}
  .candidateActions button{flex:1;min-width:120px;min-height:43px}
  .cropDialog,.markupDialog{width:100vw;height:100dvh;max-height:none;border-radius:0}
  .cropEditorShell,.markupShell{min-height:100dvh}
  .cropEditorHeader{padding:10px 12px}
  .cropEditorBody,.markupBody{grid-template-columns:1fr;padding:8px;gap:8px}
  .cropCanvasWrap,.markupCanvasWrap{padding:8px;min-height:45dvh}
  .cropEditorSide,.markupHelp{position:static}
  .cropPreview,#markupPreview{max-height:145px}
  .cropEditorFooter{padding:8px;position:sticky;bottom:0}
  .cropEditorFooter .rowButtons{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .cropEditorFooter button{min-height:44px}
  .markupToolbar{overflow-x:auto;flex-wrap:nowrap;padding:8px}
  .markupToolbar>*{flex:0 0 auto}
  .syncStatusBox{grid-template-columns:1fr}
  .backupButtons{display:grid!important;grid-template-columns:1fr}
}

/* v7: permanent base canvas + transparent interaction overlay */
#sheetCanvasStage{position:relative;display:inline-block;line-height:0;background:transparent}
#sheetCanvas,#sheetOverlay{display:block}
#sheetCanvas{background:transparent}
#sheetOverlay{position:absolute;inset:0;background:transparent!important;cursor:crosshair;touch-action:none}
#canvasScroller{display:block}
.cloudConfigGrid{margin-top:14px}
.authGrid{margin-top:16px}
.smallText{font-size:.78rem;color:var(--muted)}
#syncMessage[hidden]{display:none}
#syncMessage.error{background:#fff0f1;color:#9d1833;border-color:#ffd0d8}
#syncMessage.success{background:#effaf4;color:#176a42;border-color:#bfe8d2}
details>summary{cursor:pointer;font-weight:700;padding:8px 0}
@media(max-width:760px){
  #sheetCanvasStage{min-width:max-content}
  .cloudActions{grid-template-columns:1fr!important}
}

/* v8.9: zoom, trash, backups and history */
#editItemMarkup{margin:0 0 12px}.markupCanvasWrap{justify-content:flex-start}.maintenanceList{display:grid;gap:8px}.maintenanceRow,.historyRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}.maintenanceRow>div{display:flex;align-items:center;gap:10px;min-width:0}.maintenanceRow img{width:58px;height:58px;object-fit:contain;background:#eee;border-radius:7px}.maintenanceRow span,.historyRow{min-width:0}.maintenanceRow small,.historyRow small{display:block;color:var(--muted);font-size:.75rem;margin-top:3px}.maintenanceRow>span{display:flex;gap:6px;flex-wrap:wrap}.historyRow{align-items:flex-start;flex-direction:column}.markupToolbar #markupZoomLabel{min-width:48px;text-align:center;font-weight:700}
@media(max-width:760px){.maintenanceRow{align-items:flex-start;flex-direction:column}.maintenanceRow>span{width:100%}.maintenanceRow>span button{flex:1}.markupCanvasWrap{overflow:auto;display:block}.markupTool[data-tool="pan"]{font-weight:700}}

/* v9.0 beta help and changelog */
.infoDialog{width:min(820px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0;overflow:hidden}
.infoShell{display:flex;flex-direction:column;max-height:calc(100dvh - 20px);background:var(--bg)}
.infoHead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;background:#fff;border-bottom:1px solid var(--line)}
.infoHead h2{margin:0}.infoHead p{margin:3px 0 0;color:var(--muted);font-size:.82rem}
.infoBody{padding:16px 18px 24px;overflow:auto}.infoBody section{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.infoBody h3{margin:0 0 8px;font-size:1.02rem}.infoBody p,.infoBody li{line-height:1.75;color:#4e4855}.infoBody ol{padding-left:1.4rem}
.infoBody .attention{border-color:#d4c2ff;background:#fbf9ff}.infoBody a{color:var(--primary);font-weight:700}
.changelog section h3{color:var(--primary)}
@media(max-width:760px){.headerButtons{grid-template-columns:1fr 1fr}.infoDialog{width:100vw;height:100dvh;max-height:none;border-radius:0}.infoShell{max-height:100dvh}.infoHead{padding:12px}.infoBody{padding:10px}.infoBody section{padding:12px}}

/* v9.1 home, registration and branding */
.brandBlock{display:flex;align-items:center;gap:11px;min-width:0}.brandLogo{width:48px;height:48px;flex:0 0 auto}.brandBlock h1{margin:0}.homeCloudPanel{margin-bottom:14px}.homeCloudHead{display:flex;justify-content:space-between;align-items:center;gap:14px}.homeCloudHead h2{margin:0 0 4px}.homeCloudHead p{margin:0;color:var(--muted)}.homeAuthButtons,.homeSyncActions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.homeSyncStatus{grid-template-columns:repeat(4,minmax(0,1fr))}.homeSyncActions{justify-content:space-between}.registrationHub>p{color:var(--muted)}.registrationChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.registrationChoice{padding:16px;text-align:left;display:grid;gap:5px;min-height:86px}.registrationChoice b{font-size:1.05rem}.registrationChoice span{font-size:.82rem;opacity:.78}.registrationChoice.primary span{color:#fff}.compactDrop{margin-top:16px}.lineDialog .dialogActions{margin-top:12px}
@media(max-width:760px){.brandLogo{width:42px;height:42px}.brandBlock{gap:8px}.headerButtons{width:auto;grid-template-columns:1fr 1fr}.homeCloudHead{align-items:stretch;flex-direction:column}.homeAuthButtons{display:grid;grid-template-columns:1fr 1fr}.homeSyncStatus{grid-template-columns:1fr 1fr}.homeSyncActions{display:grid;grid-template-columns:1fr}.registrationChoices{grid-template-columns:1fr}.registrationChoice{min-height:74px}.homeCloudPanel{padding:12px}}
@media(max-width:420px){.homeSyncStatus{grid-template-columns:1fr}.brandLogo{width:38px;height:38px}}


/* v9.1.3 image replacement and mobile markup footer */
.itemImageActions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.itemImageActions[hidden]{display:none}
.markupShell{height:min(92vh,900px);min-height:0}
.markupShell>.cropEditorHeader,.markupShell>.markupToolbar,.markupShell>.cropEditorFooter{flex:0 0 auto}
.markupBody{overflow:auto}
.markupShell>.cropEditorFooter{z-index:4}
@media(max-width:760px){
  .markupShell{height:100dvh;min-height:0;overflow:hidden}
  .markupBody{flex:1;min-height:0;overflow:auto;padding-bottom:8px}
  .markupCanvasWrap{min-height:0;height:max(42dvh,280px)}
  .markupHelp{margin-bottom:0}
  .markupShell>.cropEditorFooter{position:relative;bottom:auto;background:#fff;box-shadow:0 -4px 14px rgba(0,0,0,.08);display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .markupShell>.cropEditorFooter button{width:100%;min-height:48px}
  .itemImageActions{display:grid;grid-template-columns:1fr 1fr}
}