:root { --page:#f1f2ef; --surface:#ffffff; --surface-soft:#f7f8f5; --line:#e1e3df; --line-strong:#cfd3ce; --text:#202831; --muted:#727a7f; --teal:#0a8f83; --teal-dark:#086d65; --teal-soft:#edf7f5; --danger:#a13b3b; --shadow:0 24px 62px rgba(25,34,37,.12); --login-bg:#1d3138; }
* { box-sizing:border-box; }
html { height:100%; background:var(--page); overflow:hidden; }
body { height:100%; margin:0; overflow:hidden; background:var(--page); color:var(--text); font-family:Arial,Helvetica,sans-serif; }
button,input,textarea,select { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.hidden { display:none !important; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.file-input-hidden { position:fixed !important; left:-10000px !important; top:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }

.brand-name-text { font-weight:700; color:#6f787c; }
.signature-script { font-family:"Segoe Script","Brush Script MT","Snell Roundhand","Apple Chancery",cursive; font-style:italic; font-weight:600; letter-spacing:0; text-transform:none; }
.signature-script-footer { margin-left:2px; color:#737d80; font-size:11px; line-height:1; }
.login-error { text-align:center; }
.lang-button { padding:0; color:#8a9093; background:transparent; border:0; cursor:pointer; font-size:10px; font-weight:700; }
.lang-button:hover,.lang-button.active { color:var(--teal-dark); }
.app { position:fixed; inset:0; height:100vh; overflow:hidden; }
.appbar { height:46px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 20px; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); }
.appbar-brand { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.appbar-brand-mark { display:block; width:26px; height:26px; object-fit:contain; flex:0 0 auto; border-radius:0; box-shadow:none; }
.appbar-brand-copy { display:flex; align-items:baseline; gap:9px; }
.appbar-brand strong { color:var(--teal); font-size:10px; letter-spacing:.18em; }
.appbar-brand .signature-script { color:#3b4449; font-size:15px; line-height:1; }
.appbar-side { display:flex; align-items:center; gap:14px; min-width:0; color:var(--muted); font-size:10px; }
.language-switch { display:flex; align-items:center; gap:6px; color:#b0b4b2; }
#activeTemplateLabel { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard { height:calc(100vh - 46px); min-height:0; display:grid; grid-template-columns:minmax(0,7fr) minmax(390px,3fr); overflow:hidden; }
.preview-pane { min-width:0; min-height:0; display:grid; grid-template-rows:54px minmax(0,1fr) 34px; background:#f1f2ef; border-right:1px solid var(--line); }
.preview-meta { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 24px; color:var(--muted); font-size:10px; }
.preview-meta>div { display:flex; align-items:center; gap:10px; min-width:0; }
.preview-meta strong { max-width:420px; overflow:hidden; color:#41494d; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.mini-label { color:var(--teal); font-size:9px; font-weight:800; letter-spacing:.14em; }
.preview-viewport { position:relative; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; padding:26px 32px; overflow:hidden; }
.preview-scaler { position:relative; flex:0 0 auto; }
.signature-preview { position:absolute; top:0; left:0; width:520px; transform-origin:top left; }
.signature-preview>table { box-shadow:0 12px 32px rgba(22,44,44,.13); }
.preview-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 24px; color:#858b8d; font-size:9px; border-top:1px solid rgba(209,212,207,.65); }
.editor-pane { min-width:0; min-height:0; overflow:hidden; background:var(--surface); }
.editor-scroll { height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; scroll-behavior:auto; padding:20px 24px 40px; scrollbar-width:thin; scrollbar-color:#c9ceca #f5f6f4; }
.editor-scroll::-webkit-scrollbar { width:7px; }
.editor-scroll::-webkit-scrollbar-track { background:#f5f6f4; }
.editor-scroll::-webkit-scrollbar-thumb { background:#c9ceca; border-radius:999px; }
.editor-scroll::-webkit-scrollbar-thumb:hover { background:#afb6b1; }
.editor-intro { padding-bottom:15px; }
.editor-intro h2 { margin:5px 0 0; font-size:16px; font-weight:600; letter-spacing:-.02em; }
.editor-intro p { margin:6px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.editor-section { padding:16px 0; border-top:1px solid var(--line); }
.editor-section-first { padding-top:0; border-top:0; }
.section-title { margin-bottom:10px; color:#4c555a; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.selector-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.92fr) minmax(0,.92fr); gap:10px; align-items:start; }
.field-grid { display:grid; gap:10px; align-items:start; }
.field-grid.two { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.compact-field { min-width:0; display:grid; grid-template-rows:12px 38px; align-content:start; gap:5px; margin-bottom:10px; }
.compact-field:last-child { margin-bottom:0; }
.field-grid.two>.compact-field { margin-bottom:0; }
.field-grid.two + .compact-field { margin-top:10px; }
.selector-grid>.compact-field { margin-bottom:0; }
.compact-field label { min-height:12px; display:flex; align-items:flex-end; color:#5b6469; font-size:9px; line-height:12px; font-weight:700; }
.compact-field input,.compact-field select { width:100%; height:38px; min-height:38px; padding:0 10px; color:var(--text); background:#fff; border:1px solid var(--line-strong); border-radius:5px; outline:none; font-size:10.5px; line-height:38px; }
.compact-field textarea { width:100%; height:68px; min-height:68px; max-height:68px; padding:9px 10px; color:var(--text); background:#fff; border:1px solid var(--line-strong); border-radius:5px; outline:none; resize:none; font-size:10.5px; line-height:1.35; }
.compact-field input:focus,.compact-field textarea:focus,.compact-field select:focus { border-color:var(--teal); box-shadow:0 0 0 2px rgba(10,143,131,.07); }
.compact-field select:disabled,.compact-field option:disabled { color:#a7adaa; }
.micro-help { margin:7px 0 0; color:#8a9093; font-size:9px; line-height:1.4; }
.asset-row { display:grid; grid-template-columns:54px minmax(0,1fr); gap:11px; align-items:start; }
.compact-asset-row { grid-template-columns:76px minmax(0,1fr); }
.asset-thumb { width:54px; height:54px; overflow:hidden; background:#f1f2f1; border:1px solid var(--line); border-radius:3px; }
.asset-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.asset-logo { width:76px; min-height:52px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:5px; background:transparent; border:1px solid transparent; border-radius:3px; }
.asset-logo.asset-logo-framed { background:#fff; border-color:#dfe3df; }
.asset-logo img { max-width:100%; max-height:58px; display:block; }
.asset-controls { min-width:0; }
.file-button { min-height:31px; display:inline-flex; align-items:center; justify-content:center; padding:0 11px; margin:0 0 9px; color:#344047; background:#f8f9f7; border:1px solid var(--line-strong); border-radius:4px; cursor:pointer; font-size:9.5px; line-height:1; font-weight:700; appearance:none; }
.file-button:hover { background:#f1f3f1; }
.action-section { padding-bottom:10px; }
.action-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:0; background:transparent; }
.button { min-height:33px; padding:7px 12px; border:1px solid transparent; border-radius:4px; cursor:pointer; font-size:9.5px; font-weight:700; }
.button-primary { color:#fff; background:var(--teal); }
.button-primary:hover { background:var(--teal-dark); }
.button-secondary { color:#364147; background:#fff; border-color:var(--line-strong); }
.button-secondary:hover { background:#f7f8f7; }
.button-tertiary { color:#4a555a; background:#f7f8f6; border-color:#e0e3df; }
.button-tertiary:hover { background:#eef1ee; }
.button-full { width:100%; }
.link-button { padding:0; color:#70787d; background:transparent; border:0; cursor:pointer; font-size:10px; }
.link-button:hover { color:var(--teal-dark); }
.action-link { padding:6px 2px; }
.message { min-height:17px; margin-top:8px; color:var(--teal-dark); font-size:9px; }
.message.error { color:var(--danger); }

.demo-mode .signature-preview { -webkit-user-select:none; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.demo-mode .action-bar button:disabled { opacity:.46; cursor:not-allowed; filter:saturate(.45); box-shadow:none; }
.demo-mode .action-bar button:disabled:hover { transform:none; }
.demo-lock-note { display:flex; align-items:flex-start; gap:7px; margin-top:10px; padding:8px 9px; color:#687176; background:#f6f7f5; border:1px solid #e1e4e0; border-radius:5px; font-size:8.8px; line-height:1.45; }
.demo-lock-dot { flex:0 0 auto; width:7px; height:7px; margin-top:3px; background:#b88946; border-radius:50%; box-shadow:0 0 0 3px rgba(184,137,70,.09); }
.installation-section { padding-bottom:4px; }
.installation-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.installation-heading h3 { margin:0; color:#273139; font-size:12px; line-height:1.25; font-weight:700; letter-spacing:-.01em; }
.installation-heading p { max-width:330px; margin:4px 0 0; color:#7b8387; font-size:8.8px; line-height:1.5; }
.installation-badge { flex:0 0 auto; padding:4px 7px; color:#667176; background:#f4f6f4; border:1px solid #e2e5e1; border-radius:999px; font-size:7.8px; line-height:1; font-weight:700; white-space:nowrap; }
.installation-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:0 0 11px; padding:3px; background:#f2f4f2; border:1px solid #e2e5e1; border-radius:6px; }
.installation-tab { min-height:29px; padding:0 10px; color:#667176; background:transparent; border:0; border-radius:4px; cursor:pointer; font-size:9px; font-weight:700; }
.installation-tab.active { color:#174c48; background:#ffffff; box-shadow:0 1px 4px rgba(33,48,48,.08); }
.installation-panel { display:none; }
.installation-panel.active { display:block; }
.installation-steps { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.installation-steps li { display:grid; grid-template-columns:25px minmax(0,1fr); gap:9px; padding:9px 0; border-top:1px solid #eceeeb; }
.installation-steps li:first-child { padding-top:2px; border-top:0; }
.step-number { width:23px; height:23px; display:flex; align-items:center; justify-content:center; color:#0a8177; background:#edf7f5; border:1px solid #d6ebe7; border-radius:50%; font-size:7.6px; line-height:1; font-weight:800; letter-spacing:.02em; }
.installation-steps strong { display:block; margin:1px 0 2px; color:#364147; font-size:9px; line-height:1.25; font-weight:700; }
.installation-steps p { margin:0; color:#747d81; font-size:8.5px; line-height:1.48; }
.installation-note { display:grid; gap:3px; margin-top:8px; padding:9px 10px; color:#6a7478; background:#f8f8f6; border-left:2px solid #c7d2ce; font-size:8.3px; line-height:1.45; }
.installation-note strong { color:#49545a; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.installation-final-tip { display:grid; gap:3px; margin-top:9px; padding:9px 10px; color:#5f6a6e; background:#edf7f5; border:1px solid #d6ebe7; border-radius:5px; font-size:8.3px; line-height:1.45; }
.installation-final-tip strong { color:#0a746c; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
@media (max-width:1180px) { .dashboard { grid-template-columns:minmax(0,1.6fr) minmax(360px,1fr); } .preview-meta strong { max-width:270px; } }
@media (max-width:980px) { html,body { overflow:auto; } .app { position:static; height:auto; min-height:100vh; overflow:visible; } .dashboard { height:auto; display:block; overflow:visible; } .preview-pane { min-height:500px; border-right:0; border-bottom:1px solid var(--line); } .preview-viewport { min-height:390px; } .editor-scroll { height:auto; overflow:visible; } }
@media (max-width:650px) { .appbar { padding:0 14px; } .appbar-side { gap:9px; } #activeTemplateLabel { display:none; } .preview-pane { min-height:390px; grid-template-rows:48px minmax(0,1fr) 34px; } .preview-meta { padding:0 14px; } .preview-meta strong { max-width:220px; } .preview-viewport { min-height:300px; padding:22px 12px; overflow:auto; } .preview-bottom { padding:0 14px; } .editor-scroll { padding:18px 16px 28px; } .selector-grid,.field-grid.two { grid-template-columns:1fr; } }
/* MODEL 02 LOGO PREVIEW - START */
.asset-logo.asset-logo-model02 { background:#0a79b8; border-color:#0a79b8; }
.asset-logo.asset-logo-model02 img { max-width:92%; max-height:52px; }
/* MODEL 02 LOGO PREVIEW - END */

/* ACCESS ROLES - START */
.access-role-badge { display:inline-flex; align-items:center; min-height:20px; padding:0 8px; border:1px solid #dce2de; border-radius:999px; color:#687176; background:#f8faf8; font-size:8px; font-weight:800; letter-spacing:.11em; }
.owner-mode .access-role-badge { color:#08756c; border-color:#b9dcd7; background:#eef8f6; }
.viewer-mode .signature-preview { -webkit-user-select:none; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.viewer-mode .action-bar button:disabled,.viewer-mode .file-button:disabled { opacity:.46; cursor:not-allowed; filter:saturate(.45); box-shadow:none; }
.owner-admin-section { background:#fbfcfa; }
.owner-admin-heading { margin:0 0 12px; }
.owner-admin-heading strong { display:block; margin:0 0 4px; color:#26323a; font-size:11px; }
.owner-admin-heading p { margin:0; color:#7a8286; font-size:9px; line-height:1.45; }
.company-name-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.owner-admin-actions { display:flex; align-items:center; gap:12px; margin-top:12px; }
.owner-admin-actions .button { min-height:38px; }
/* ACCESS ROLES - END */

@media (max-width:650px) { .company-name-grid { grid-template-columns:1fr; } .access-role-badge { display:none; } }
.photo-zoom-control { margin:0 0 10px; padding:8px 9px 9px; background:#f7f8f6; border:1px solid #e2e5e1; border-radius:5px; }
.photo-zoom-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; }
.photo-zoom-head label { color:#5b6469; font-size:9px; line-height:12px; font-weight:700; }
.photo-zoom-head span { color:#6f777b; font-size:8.5px; line-height:12px; font-weight:700; }
.photo-zoom-range { width:100%; height:18px; margin:0; accent-color:var(--teal); cursor:pointer; }
.photo-zoom-help { margin-top:4px; }
.asset-thumb img { transform-origin:center center; }
/* V15 EDITOR UX - START */
.social-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.social-control { min-width:0; padding:9px; background:#f8f9f7; border:1px solid #e2e5e1; border-radius:6px; }
.social-control-head { min-height:18px; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.social-control-head>label:first-child { color:#4d585d; font-size:9px; font-weight:700; }
.social-control>input[type="url"] { width:100%; height:34px; padding:0 9px; color:var(--text); background:#fff; border:1px solid var(--line-strong); border-radius:5px; outline:none; font-size:9.5px; }
.social-control>input[type="url"]:focus { border-color:var(--teal); box-shadow:0 0 0 2px rgba(10,143,131,.07); }
.toggle-switch { position:relative; width:30px; height:17px; flex:0 0 30px; display:block; }
.toggle-switch input { position:absolute; opacity:0; pointer-events:none; }
.toggle-switch span { position:absolute; inset:0; background:#c8ceca; border-radius:999px; cursor:pointer; transition:background .15s ease; }
.toggle-switch span::after { content:""; position:absolute; width:13px; height:13px; top:2px; left:2px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .15s ease; }
.toggle-switch input:checked+span { background:var(--teal); }
.toggle-switch input:checked+span::after { transform:translateX(13px); }
.logo-size-control { margin-top:0; }
.installation-section { padding:0; }
.installation-summary { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0; color:#4c555a; cursor:pointer; list-style:none; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.installation-summary::-webkit-details-marker { display:none; }
.installation-chevron { width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:#748086; background:#f5f7f5; border:1px solid #e1e5e1; border-radius:50%; font-size:15px; line-height:1; transition:transform .16s ease; }
.installation-section[open] .installation-chevron { transform:rotate(180deg); }
.installation-body { padding:0 0 16px; }
@media (max-width:650px) { .social-controls { grid-template-columns:1fr; } }
/* V15 EDITOR UX - END */

/* V16 compact editor system */
.editor-scroll { padding:16px 18px 28px; }
.editor-intro { padding-bottom:11px; }
.editor-intro h2 { font-size:15px; font-weight:700; }
.editor-intro p { margin-top:4px; font-size:9.5px; }
.editor-section { padding:12px 0; }
.section-title { margin-bottom:8px; color:#354147; font-size:9.5px; font-weight:800; letter-spacing:.09em; }
.section-caption { margin:3px 0 0; color:#7a8387; font-size:8.8px; line-height:1.4; }
.selector-grid { gap:8px; }
.field-grid { gap:8px; }
.compact-field { grid-template-rows:12px 34px; gap:4px; margin-bottom:8px; }
.compact-field label { color:#505c61; font-size:9px; font-weight:700; }
.compact-field input,.compact-field select { height:34px; min-height:34px; padding:0 30px 0 10px; border-radius:7px; font-size:10px; line-height:34px; box-shadow:0 1px 0 rgba(21,35,40,.02); }
.compact-field select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#738086 50%),linear-gradient(135deg,#738086 50%,transparent 50%); background-position:calc(100% - 14px) 14px,calc(100% - 10px) 14px; background-size:4px 4px,4px 4px; background-repeat:no-repeat; }
.compact-field textarea { height:54px; min-height:54px; max-height:54px; padding:8px 10px; border-radius:7px; font-size:10px; }
.social-controls { grid-template-columns:1fr; gap:6px; }
.social-control { display:grid; grid-template-columns:86px minmax(0,1fr); align-items:center; gap:8px; padding:6px 8px; background:#fafbf9; border-radius:7px; }
.social-control-head { min-height:32px; margin:0; }
.social-control-head>label:first-child { font-size:9.5px; color:#3f4b51; }
.social-control>input[type="url"] { height:32px; padding:0 9px; border-radius:6px; font-size:9.5px; }
.toggle-switch { transform:scale(.88); transform-origin:right center; }
.asset-row { grid-template-columns:48px minmax(0,1fr); gap:10px; }
.compact-asset-row { grid-template-columns:66px minmax(0,1fr); }
.asset-thumb { width:48px; height:48px; border-radius:7px; }
.asset-logo { width:66px; min-height:48px; border-radius:7px; }
.file-button { min-height:29px; margin-bottom:7px; border-radius:7px; }
.action-bar { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.action-bar .button { width:100%; min-height:34px; border-radius:7px; }
.action-bar .action-link { grid-column:1 / -1; justify-self:start; }
.message { margin-top:7px; min-height:0; font-size:8.8px; }
.installation-section { margin-top:2px; }
.installation-summary { min-height:56px; padding:0 2px; text-transform:none; letter-spacing:0; }
.installation-summary-icon { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border-radius:8px; background:#edf7f5; color:#087c72; font-size:12px; font-weight:800; }
.installation-summary-copy { min-width:0; flex:1; display:grid; gap:2px; }
.installation-summary-copy strong { color:#344047; font-size:10.5px; line-height:1.2; }
.installation-summary-copy small { color:#899195; font-size:8.5px; line-height:1.2; font-weight:500; }
.installation-chevron { width:26px; height:26px; border-radius:8px; font-size:14px; }
.owner-admin-section { background:#fbfcfa; margin:4px -8px 0; padding:12px 8px; border-radius:10px; border:1px solid #e6e9e5; }
.company-admin-list { display:grid; gap:6px; }
.company-admin-row { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(96px,.8fr) 48px; gap:6px; align-items:center; }
.company-admin-main { position:relative; min-width:0; }
.company-admin-name,.company-admin-template { width:100%; height:32px; border:1px solid #d5dad6; border-radius:7px; background:#fff; color:#273238; font-size:9.5px; outline:none; }
.company-admin-name { padding:0 50px 0 9px; }
.company-admin-template { padding:0 7px; }
.company-admin-id { position:absolute; right:7px; top:50%; transform:translateY(-50%); color:#9aa1a4; font-size:6.7px; font-weight:800; }
.company-admin-lock { color:#90989b; font-size:8px; text-align:center; }
.company-delete-button { height:30px; padding:0 7px; border:1px solid #ead8d8; border-radius:7px; background:#fffafa; color:#9a4a4a; font-size:8px; font-weight:700; cursor:pointer; }
.company-create-card { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(100px,.9fr) auto; gap:7px; align-items:end; margin-top:9px; padding-top:9px; border-top:1px solid #e6e9e5; }
.company-create-card .compact-field { margin:0; }
.company-add-button { height:34px; min-height:34px; border-radius:7px; white-space:nowrap; }
@media (max-width:650px) { .company-admin-row,.company-create-card { grid-template-columns:1fr; } .social-control { grid-template-columns:80px minmax(0,1fr); } }

/* V17 workspace model library */
.company-admin-row { grid-template-columns:minmax(0,1fr) 62px 48px; }
.company-model-count { color:#687378; font-size:8px; font-weight:700; text-align:center; white-space:nowrap; }
.workspace-divider { height:1px; margin:12px 0; background:#e5e9e5; }
.model-admin-heading { margin-bottom:8px; }
.model-admin-toolbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; gap:7px; align-items:end; }
.model-admin-toolbar .compact-field { margin:0; }
.model-add-button { height:34px; min-height:34px; padding:0 11px; border-radius:7px; white-space:nowrap; }
.model-admin-list { display:grid; gap:6px; margin-top:8px; }
.model-admin-row { display:grid; grid-template-columns:58px minmax(0,1fr) 50px; gap:6px; align-items:center; padding:6px; background:#fff; border:1px solid #e3e7e3; border-radius:8px; }
.model-admin-label { color:#435057; font-size:8.6px; font-weight:800; white-space:nowrap; }
.model-source-select { width:100%; height:31px; padding:0 28px 0 9px; color:#2d393f; background-color:#fafbf9; border:1px solid #d7dcd8; border-radius:6px; outline:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,#738086 50%),linear-gradient(135deg,#738086 50%,transparent 50%); background-position:calc(100% - 13px) 13px,calc(100% - 9px) 13px; background-size:4px 4px,4px 4px; background-repeat:no-repeat; font-size:8.8px; }
.model-source-select:focus { border-color:var(--teal); box-shadow:0 0 0 2px rgba(10,143,131,.07); }
.model-delete-button { height:29px; padding:0 6px; color:#945151; background:#fffafa; border:1px solid #eadada; border-radius:6px; font-size:7.7px; font-weight:700; cursor:pointer; }
.model-delete-button:disabled { opacity:.38; cursor:not-allowed; }
.installation-chevron svg { display:block; transition:transform .16s ease; }
.installation-section[open] .installation-chevron { transform:none; }
.installation-section[open] .installation-chevron svg { transform:rotate(180deg); }
@media (max-width:650px) { .model-admin-toolbar,.model-admin-row { grid-template-columns:1fr; } .company-admin-row { grid-template-columns:1fr; } .company-model-count,.company-admin-lock { text-align:left; } }
/* V91 CLIENT PORTAL — photographic background + restrained glass access */
.portal-screen { position:fixed; inset:0; z-index:900; width:100%; height:100dvh; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; color:#f5fbfb; background:#081820; }
.portal-media { position:fixed; inset:0; z-index:0; background-image:url('../img/wallpaper.webp'); background-size:cover; background-position:center; transform:scale(1.01); }
.portal-dim { position:fixed; inset:0; z-index:1; background:linear-gradient(90deg,rgba(4,17,23,.82) 0%,rgba(4,17,23,.67) 44%,rgba(4,17,23,.45) 70%,rgba(4,17,23,.60) 100%),linear-gradient(180deg,rgba(1,9,13,.20),rgba(1,9,13,.46)); }
.portal-shell { position:relative; z-index:2; width:min(1480px,calc(100% - 64px)); min-height:100dvh; margin:0 auto; display:grid; grid-template-rows:76px minmax(430px,1fr) auto 38px; }
.portal-nav { display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid rgba(255,255,255,.14); }
.portal-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.portal-mark { width:42px; height:42px; display:block; object-fit:contain; }
.portal-brand-copy { display:grid; align-content:center; gap:1px; }
.portal-brand-copy strong { color:#fff; font-size:22px; line-height:1; font-weight:700; letter-spacing:.005em; text-shadow:0 1px 8px rgba(0,0,0,.18); }
.portal-brand-copy .signature-script { margin-top:2px; color:#67c7bc; font-size:15px; line-height:1; }
.portal-nav-right { display:flex; align-items:center; gap:26px; }
.portal-context { color:rgba(236,247,247,.62); font-size:9px; line-height:1; font-weight:800; letter-spacing:.16em; }
.portal-language { display:flex; align-items:center; height:32px; }
.portal-language .lang-button { min-width:28px; height:28px; color:rgba(245,251,251,.62); font-size:10px; font-weight:700; letter-spacing:.04em; }
.portal-language .lang-button:hover,.portal-language .lang-button.active { color:#fff; }
.portal-lang-divider { width:1px; height:13px; margin:0 5px; background:rgba(255,255,255,.24); }
.portal-main { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:clamp(54px,7vw,108px); align-items:center; padding:44px 0 34px; }
.portal-copy { min-width:0; align-self:center; max-width:760px; }
.portal-overview { max-width:680px; }
.portal-kicker { display:inline-block; margin-bottom:16px; color:#75d2c8; font-size:10px; line-height:1; font-weight:800; letter-spacing:.18em; }
.portal-overview h1 { max-width:650px; margin:0; color:#fff; font-size:clamp(36px,3.35vw,52px); line-height:1.07; font-weight:600; letter-spacing:-.035em; text-wrap:balance; text-shadow:0 2px 18px rgba(0,0,0,.20); }
.portal-intro { max-width:610px; margin:18px 0 0; color:rgba(239,248,248,.80); font-size:14px; line-height:1.62; }
.portal-benefits { max-width:760px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:34px 0 0; padding-top:21px; border-top:1px solid rgba(255,255,255,.18); }
.portal-benefit { min-width:0; display:grid; grid-template-columns:22px minmax(0,1fr); gap:11px; padding:0 22px 0 0; }
.portal-benefit + .portal-benefit { padding-left:22px; border-left:1px solid rgba(255,255,255,.15); }
.portal-benefit-icon { width:20px; height:20px; display:grid; place-items:center; margin-top:1px; opacity:.94; }
.portal-benefit-icon img { width:18px; height:18px; display:block; filter:brightness(0) saturate(100%) invert(80%) sepia(17%) saturate(927%) hue-rotate(123deg) brightness(95%) contrast(88%); }
.portal-benefit strong { display:block; margin:0 0 5px; color:#fff; font-size:11px; line-height:1.25; font-weight:700; }
.portal-benefit div>span { display:block; max-width:210px; color:rgba(235,245,245,.64); font-size:10.5px; line-height:1.5; }
.portal-auth { min-width:0; width:100%; margin:0; align-self:center; background:rgba(13,30,39,.52); border:1px solid rgba(255,255,255,.23); border-radius:18px; box-shadow:0 28px 80px rgba(0,0,0,.26); backdrop-filter:blur(20px) saturate(118%); -webkit-backdrop-filter:blur(20px) saturate(118%); }
.portal-auth-inner { width:100%; padding:34px 36px 30px; }
.portal-auth-head { min-height:18px; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.portal-auth-status { display:flex; align-items:center; gap:7px; color:rgba(235,245,245,.58); font-size:9px; }
.portal-auth-status i { width:6px; height:6px; display:block; background:#67c7bc; border-radius:50%; box-shadow:0 0 0 3px rgba(103,199,188,.10); }
.portal-auth h2 { max-width:300px; margin:15px 0 0; color:#fff; font-size:25px; line-height:1.16; font-weight:600; letter-spacing:-.025em; }
.portal-auth p { max-width:300px; margin:9px 0 0; color:rgba(236,246,246,.66); font-size:11.5px; line-height:1.55; }
.portal-fields { display:grid; gap:18px; margin-top:30px; }
.portal-field { position:relative; display:grid; gap:5px; }
.portal-field-label { color:rgba(245,251,251,.82); font-size:9.5px; font-weight:700; }
.portal-field input { width:100%; height:46px; padding:0 40px 0 34px; color:#fff; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.42); border-radius:0; outline:none; font-size:13px; transition:border-color .16s ease,background .16s ease; }
.portal-field input::placeholder { color:rgba(236,246,246,.54); opacity:1; }
.portal-field input:focus { border-bottom-color:#83ddd3; background:linear-gradient(180deg,transparent 0%,rgba(103,199,188,.035) 100%); box-shadow:none; }
.portal-field-icon { position:absolute; z-index:2; left:3px; bottom:13px; width:18px; height:18px; display:grid; place-items:center; color:rgba(240,248,248,.70); pointer-events:none; }
.portal-field-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.portal-password-toggle { position:absolute; z-index:3; right:0; bottom:8px; width:32px; height:32px; display:grid; place-items:center; padding:0; color:rgba(241,249,249,.64); background:transparent; border:0; cursor:pointer; }
.portal-password-toggle:hover { color:#fff; }
.portal-password-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.portal-password-toggle.is-visible .login-password-slash { display:none; }
.portal-submit { width:100%; height:44px; margin-top:24px; color:#0d252d; background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.72); border-radius:999px; cursor:pointer; font-size:10.5px; font-weight:800; letter-spacing:.08em; box-shadow:0 10px 26px rgba(0,0,0,.11); transition:background .16s ease,transform .16s ease; }
.portal-submit:hover { background:#fff; transform:translateY(-1px); }
.portal-error { min-height:15px; margin-top:7px; color:#ffd0d0; text-align:left; font-size:9.5px; }
.portal-auth-note { display:flex; justify-content:space-between; gap:12px; margin-top:22px; padding-top:16px; color:rgba(236,246,246,.48); border-top:1px solid rgba(255,255,255,.13); font-size:9px; line-height:1.4; }
.portal-auth-note strong { color:rgba(255,255,255,.72); font-size:9.5px; white-space:nowrap; }
.portal-auth-note span { color:inherit; text-align:right; }
.portal-install { display:grid; grid-template-columns:minmax(210px,.9fr) repeat(3,minmax(0,1fr)); align-items:stretch; border-top:1px solid rgba(255,255,255,.17); border-bottom:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.portal-install-intro { display:flex; flex-direction:column; justify-content:center; padding:18px 24px 18px 0; }
.portal-install-intro h2 { margin:0 0 5px; color:#fff; font-size:15px; line-height:1.2; font-weight:650; }
.portal-install-intro p { margin:0; max-width:250px; color:rgba(235,245,245,.57); font-size:9.8px; line-height:1.45; }
.portal-platforms { display:contents; }
.portal-platform { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) 16px; align-items:center; gap:12px; padding:16px 18px; color:inherit; text-align:left; background:transparent; border:0; border-left:1px solid rgba(255,255,255,.14); cursor:pointer; transition:background .16s ease; }
.portal-platform:hover { background:rgba(255,255,255,.055); }
.portal-platform>img { width:32px; height:32px; display:block; object-fit:contain; }
.portal-platform>span { min-width:0; display:grid; gap:3px; }
.portal-platform strong { color:#fff; font-size:10.5px; line-height:1.15; font-weight:800; letter-spacing:.05em; }
.portal-platform small { overflow:hidden; color:rgba(235,245,245,.56); font-size:9.3px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.portal-platform>b { color:rgba(255,255,255,.50); font-size:12px; font-weight:400; }
.portal-footer { display:flex; align-items:center; gap:12px; color:rgba(235,245,245,.46); font-size:8.8px; }
.portal-footer-rule { width:1px; height:12px; background:rgba(255,255,255,.16); }

body.login-guide-open { overflow:hidden; }
.login-guide-modal[hidden] { display:none !important; }
.login-guide-modal { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:16px; }
.login-guide-backdrop { position:absolute; inset:0; background:rgba(2,10,14,.66); backdrop-filter:blur(18px) saturate(105%); -webkit-backdrop-filter:blur(18px) saturate(105%); }
.login-guide-dialog { position:relative; z-index:2; width:min(1040px,100%); height:min(760px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); display:grid; grid-template-columns:230px minmax(0,1fr); overflow:hidden; color:#f4fbfb; background:rgba(11,27,35,.80); border:1px solid rgba(255,255,255,.22); border-radius:20px; box-shadow:0 34px 100px rgba(0,0,0,.38); backdrop-filter:blur(24px) saturate(120%); -webkit-backdrop-filter:blur(24px) saturate(120%); }
.login-guide-close { position:absolute; z-index:5; top:14px; right:16px; width:34px; height:34px; display:grid; place-items:center; padding:0; color:rgba(255,255,255,.72); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:50%; cursor:pointer; font-size:22px; line-height:1; }
.login-guide-close:hover { color:#fff; background:rgba(255,255,255,.11); }
.login-guide-sidebar { min-width:0; display:flex; flex-direction:column; padding:28px 18px 22px; background:rgba(3,13,18,.25); border-right:1px solid rgba(255,255,255,.12); }
.login-guide-brand { display:flex; align-items:center; gap:10px; padding:0 8px 24px; }
.login-guide-brand>img { width:34px; height:34px; object-fit:contain; }
.login-guide-brand>div { display:grid; gap:1px; }
.login-guide-brand strong { color:#fff; font-size:15px; line-height:1; }
.login-guide-brand .signature-script { color:#67c7bc; font-size:11px; }
.login-guide-sidebar>p { margin:0; padding:0 8px 10px; color:rgba(238,248,248,.42); font-size:8.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.login-guide-nav { display:grid; gap:4px; }
.login-guide-nav-item { width:100%; min-height:52px; display:grid; grid-template-columns:30px 1fr; align-items:center; gap:10px; padding:0 10px; color:rgba(240,249,249,.67); text-align:left; background:transparent; border:1px solid transparent; border-radius:10px; cursor:pointer; }
.login-guide-nav-item:hover { color:#fff; background:rgba(255,255,255,.045); }
.login-guide-nav-item.is-active { color:#fff; background:rgba(255,255,255,.085); border-color:rgba(255,255,255,.11); }
.login-guide-nav-item img { width:28px; height:28px; display:block; object-fit:contain; }
.login-guide-nav-item span { font-size:10.5px; font-weight:700; }
.login-guide-sidebar-note { margin-top:auto; padding:16px 8px 0; color:rgba(235,246,246,.44); border-top:1px solid rgba(255,255,255,.10); font-size:9.2px; line-height:1.48; }
.login-guide-content { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.login-guide-platform-head { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:start; padding:34px 48px 24px; border-bottom:1px solid rgba(255,255,255,.11); }
.login-guide-platform-head>img { width:46px; height:46px; display:block; object-fit:contain; }
.login-guide-platform-head>div>span { display:block; margin:2px 0 7px; color:#73d0c6; font-size:8.5px; font-weight:800; letter-spacing:.16em; }
.login-guide-platform-head h3 { margin:0; color:#fff; font-size:27px; line-height:1.12; font-weight:600; letter-spacing:-.025em; }
.login-guide-platform-head p { max-width:650px; margin:8px 0 0; color:rgba(236,247,247,.60); font-size:10.8px; line-height:1.5; }
.login-guide-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:8px 48px 28px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
.login-guide-body::-webkit-scrollbar { width:6px; }
.login-guide-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:999px; }
.login-guide-section { padding:24px 0 4px; }
.login-guide-section + .login-guide-section { border-top:1px solid rgba(255,255,255,.10); }
.login-guide-section-head { display:grid; gap:6px; margin-bottom:11px; }
.login-guide-section-head h4 { margin:0; color:#fff; font-size:13px; line-height:1.25; font-weight:700; }
.login-guide-path { width:max-content; max-width:100%; padding:5px 8px; overflow:hidden; color:#8bd8cf; background:rgba(103,199,188,.075); border:1px solid rgba(103,199,188,.14); border-radius:5px; font-size:9px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.login-guide-steps { display:grid; }
.login-guide-step { display:grid; grid-template-columns:12px minmax(0,1fr); gap:11px; padding:12px 0; border-top:1px solid rgba(255,255,255,.075); }
.login-guide-step-mark { width:6px; height:6px; margin-top:5px; background:#67c7bc; border-radius:50%; box-shadow:0 0 0 3px rgba(103,199,188,.09); }
.login-guide-step strong { display:block; margin:0 0 3px; color:#f7fbfb; font-size:10.5px; line-height:1.25; }
.login-guide-step p { margin:0; color:rgba(235,246,246,.62); font-size:10.2px; line-height:1.5; }
.login-guide-note { margin:18px 0 0; padding:14px 16px; background:rgba(103,199,188,.065); border-left:2px solid #67c7bc; }
.login-guide-note strong { display:block; margin-bottom:4px; color:#dff7f4; font-size:9.5px; }
.login-guide-note p { margin:0; color:rgba(234,246,246,.60); font-size:9.8px; line-height:1.5; }
.login-guide-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 48px 20px; border-top:1px solid rgba(255,255,255,.10); }
.login-guide-official { color:#86dcd2; font-size:9.5px; font-weight:700; text-decoration:none; }
.login-guide-official:hover { color:#fff; }
.login-guide-done { min-width:92px; height:36px; margin:0; padding:0 16px; color:#0d252d; background:rgba(255,255,255,.93); border:0; border-radius:999px; cursor:pointer; font-size:9.5px; font-weight:800; }

@media (max-width:1100px) {
  .portal-shell { width:min(1000px,calc(100% - 44px)); grid-template-rows:72px auto auto 38px; }
  .portal-context { display:none; }
  .portal-main { grid-template-columns:minmax(0,1fr) 350px; gap:40px; padding:36px 0 28px; }
  .portal-overview h1 { font-size:38px; }
  .portal-benefits { grid-template-columns:1fr; gap:0; max-width:560px; margin-top:26px; padding-top:10px; }
  .portal-benefit { padding:11px 0; }
  .portal-benefit + .portal-benefit { padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.10); }
  .portal-benefit div>span { max-width:none; }
  .portal-install { grid-template-columns:1fr repeat(3,minmax(0,1fr)); }
  .portal-install-intro { padding-right:16px; }
  .portal-platform { padding:14px 12px; gap:9px; }
  .portal-platform small { white-space:normal; }
}

@media (max-width:760px) {
  .portal-screen { overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .portal-media { background-position:center; }
  .portal-dim { background:linear-gradient(180deg,rgba(3,14,19,.80) 0%,rgba(3,14,19,.66) 48%,rgba(3,14,19,.76) 100%); }
  .portal-shell { width:calc(100% - 28px); min-height:100dvh; display:block; padding-bottom:max(18px,env(safe-area-inset-bottom)); }
  .portal-nav { min-height:68px; }
  .portal-mark { width:36px; height:36px; }
  .portal-brand { gap:9px; }
  .portal-brand-copy strong { font-size:18px; }
  .portal-brand-copy .signature-script { font-size:12.5px; }
  .portal-language .lang-button { min-width:25px; font-size:9px; }
  .portal-lang-divider { margin:0 3px; }
  .portal-main { display:flex; flex-direction:column; gap:0; padding:38px 0 26px; }
  .portal-copy { order:1; }
  .portal-kicker { margin-bottom:12px; font-size:8.5px; }
  .portal-overview h1 { font-size:31px; line-height:1.1; }
  .portal-intro { margin-top:14px; font-size:12.8px; }
  .portal-benefits { display:block; margin-top:24px; }
  .portal-benefit { grid-template-columns:20px minmax(0,1fr); padding:12px 0; }
  .portal-auth { order:2; margin-top:30px; border-radius:16px; }
  .portal-auth-inner { padding:28px 24px 25px; }
  .portal-auth h2 { font-size:23px; }
  .portal-field input { height:48px; font-size:16px; }
  .portal-auth-note { display:grid; gap:4px; }
  .portal-auth-note span { text-align:left; }
  .portal-install { display:block; margin-top:4px; border-bottom:0; }
  .portal-install-intro { padding:22px 0 12px; }
  .portal-install-intro p { max-width:none; }
  .portal-platforms { display:block; }
  .portal-platform { width:100%; border-left:0; border-top:1px solid rgba(255,255,255,.12); padding:14px 0; }
  .portal-platform:hover { background:transparent; }
  .portal-platform small { white-space:normal; }
  .portal-footer { min-height:50px; padding:14px 0; flex-wrap:wrap; gap:7px; }
  .portal-footer-rule { display:none; }
  .portal-footer span:last-child { flex-basis:100%; }
  .login-guide-modal { padding:8px; }
  .login-guide-dialog { width:100%; height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); border-radius:16px; }
  .login-guide-sidebar { padding:16px 14px 12px; border-right:0; border-bottom:1px solid rgba(255,255,255,.10); }
  .login-guide-brand,.login-guide-sidebar>p,.login-guide-sidebar-note { display:none; }
  .login-guide-nav { grid-template-columns:repeat(3,1fr); gap:6px; padding-right:42px; }
  .login-guide-nav-item { min-height:44px; grid-template-columns:24px minmax(0,1fr); gap:7px; padding:0 8px; }
  .login-guide-nav-item img { width:23px; height:23px; }
  .login-guide-nav-item span { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
  .login-guide-content { min-height:0; }
  .login-guide-platform-head { grid-template-columns:40px minmax(0,1fr); gap:12px; padding:22px 20px 18px; }
  .login-guide-platform-head>img { width:38px; height:38px; }
  .login-guide-platform-head h3 { font-size:23px; }
  .login-guide-platform-head p { font-size:10px; }
  .login-guide-body { padding:4px 20px 22px; }
  .login-guide-section { padding-top:20px; }
  .login-guide-path { white-space:normal; }
  .login-guide-actions { padding:14px 20px 16px; }
}