@charset "UTF-8";
.gx-scope{--gx-blue:#0B63F6;--gx-blue-dark:#0848b8;--gx-cyan:#22D3EE;--gx-cyan-soft:#e6f9fd;--gx-grad:linear-gradient(135deg,#0B63F6 0%,#22D3EE 100%);--gx-grad-soft:linear-gradient(135deg,rgba(11,99,246,.10) 0%,rgba(34,211,238,.10) 100%);--gx-n-0:#ffffff;--gx-n-25:#fbfcfe;--gx-n-50:#f6f8fc;--gx-n-100:#edf1f7;--gx-n-200:#dfe5ee;--gx-n-300:#c7d0de;--gx-n-400:#98a3b6;--gx-n-500:#6b7789;--gx-n-600:#4d586a;--gx-n-700:#364152;--gx-n-900:#111a2b;--gx-r-8:8px;--gx-r-12:12px;--gx-r-16:16px;--gx-r-pill:999px;--gx-e1:0 1px 2px rgba(15,23,42,.06);--gx-e2:0 2px 6px rgba(15,23,42,.05),0 10px 24px rgba(15,23,42,.06);--gx-e3:0 18px 42px rgba(11,99,246,.16),0 2px 8px rgba(15,23,42,.06);--gx-s-1:4px;--gx-s-2:8px;--gx-s-3:12px;--gx-s-4:16px;--gx-s-5:24px;--gx-s-6:32px;--gx-s-7:48px;--gx-t-14:14px;--gx-t-16:16px;--gx-t-20:20px;--gx-t-24:24px;--gx-t-32:32px;--gx-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;--gx-font-mono:"Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;font-family:var(--gx-font);font-size:var(--gx-t-14);color:var(--gt-text,var(--gx-n-700));-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.gx-scope *,.gx-scope *::before,.gx-scope *::after{box-sizing:border-box}
.gx-icon{display:inline-block;flex:0 0 auto;vertical-align:-.15em}
.gx-hero{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gx-s-4);padding:20px 24px;margin-bottom:var(--gx-s-4);background:var(--gt-surface,var(--gx-n-0));border:1px solid var(--gt-border,var(--gx-n-200));border-radius:var(--gx-r-16);box-shadow:var(--gx-e2);overflow:hidden}
.gx-hero::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--gx-grad)}
.gx-hero::after{content:"";position:absolute;top:-120px;right:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(34,211,238,.20),rgba(11,99,246,0) 68%);pointer-events:none}
.gx-hero-main{position:relative;z-index:1;min-width:0;flex:1 1 320px}
.gx-hero-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gx-blue);margin-bottom:6px}
.gx-hero-title{margin:0 0 6px;font-size:var(--gx-t-24);line-height:1.25;font-weight:750;letter-spacing:-.01em;color:var(--gt-text,var(--gx-n-900));overflow-wrap:anywhere}
.gx-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;font-size:var(--gx-t-14);color:var(--gt-text-muted,var(--gx-n-500))}
.gx-meta-item{display:inline-flex;align-items:center;gap:6px;min-width:0}
.gx-meta-role{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--gx-n-500)}
.gx-scope-badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 10px 4px 8px;border-radius:var(--gx-r-pill);border:1px solid rgba(11,99,246,.28);background:var(--gx-grad-soft);color:var(--gx-blue);font-size:12.5px;font-weight:650;line-height:1.4;min-width:0}
.gx-scope-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34ch}
.gx-scope-code{font-family:var(--gx-font-mono);font-size:11px;font-weight:600;letter-spacing:.02em;padding:1px 6px;border-radius:6px;background:rgba(11,99,246,.12);white-space:nowrap}
.gx-hero-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}
.gx-btn,.gx-scope .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--gx-r-12);border:1px solid transparent;font-family:var(--gx-font);font-size:var(--gx-t-14);font-weight:650;line-height:1.2;text-align:center;cursor:pointer;transition:transform .12s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
.gx-btn:hover,.gx-scope .btn:hover{text-decoration:none;transform:translateY(-1px)}
.gx-btn:active,.gx-scope .btn:active{transform:none}
.gx-btn-primary,.gx-scope .btn-primary{background:var(--gx-grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(11,99,246,.22)}
.gx-btn-primary:hover,.gx-scope .btn-primary:hover{background:linear-gradient(135deg,#0a58d9 0%,#1cc3dd 100%);color:#fff;box-shadow:0 10px 22px rgba(11,99,246,.28)}
.gx-btn-secondary,.gx-scope .btn-outline,.gx-scope .btn-secondary{background:var(--gt-surface,var(--gx-n-0));border-color:var(--gt-border,var(--gx-n-200));color:var(--gt-text,var(--gx-n-700));box-shadow:var(--gx-e1)}
.gx-btn-secondary:hover,.gx-scope .btn-outline:hover,.gx-scope .btn-secondary:hover{border-color:var(--gx-blue);color:var(--gx-blue);background:var(--gx-n-25)}
.gx-btn-ghost,.gx-scope .btn-ghost{background:transparent;border-color:transparent;color:var(--gt-text-muted,var(--gx-n-500));box-shadow:none}
.gx-btn-ghost:hover,.gx-scope .btn-ghost:hover{background:var(--gx-grad-soft);color:var(--gx-blue)}
.gx-btn-sm,.gx-scope .btn-sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:var(--gx-r-8)}
.gx-btn-lg,.gx-scope .btn-lg{min-height:48px;padding:0 22px;font-size:var(--gx-t-16);border-radius:var(--gx-r-12)}
.gx-scope .btn:focus-visible,.gx-btn:focus-visible,.gx-scope .form-control:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(34,211,238,.38),0 0 0 1.5px var(--gx-blue)}
.gx-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gx-s-4);margin:0 0 var(--gx-s-5)}
.gx-kpi{position:relative;display:flex;align-items:flex-start;gap:12px;min-width:0;padding:16px;background:var(--gt-surface,var(--gx-n-0));border:1px solid var(--gt-border,var(--gx-n-200));border-radius:var(--gx-r-16);box-shadow:var(--gx-e1);transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.gx-kpi:hover{box-shadow:var(--gx-e2);transform:translateY(-2px)}
.gx-kpi-chip{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border-radius:var(--gx-r-12);background:var(--gx-grad-soft);color:var(--gx-blue);border:1px solid rgba(11,99,246,.14)}
.gx-kpi-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.gx-kpi-label{font-size:12.5px;font-weight:650;letter-spacing:.01em;color:var(--gt-text-muted,var(--gx-n-500));line-height:1.35;overflow-wrap:anywhere}
.gx-kpi-value{font-size:clamp(19px,2.1vw,26px);font-weight:750;letter-spacing:-.015em;line-height:1.18;color:var(--gt-text,var(--gx-n-900));font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gx-kpi-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:2px}
.gx-kpi-sub{font-size:12px;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-delta{display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 5px;border-radius:var(--gx-r-pill);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.gx-delta.is-up{color:#0b6b43;background:rgba(16,185,129,.14)}
.gx-delta.is-down{color:#a32014;background:rgba(239,68,68,.13)}
.gx-kpi-success .gx-kpi-chip{color:#0b6b43;background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.22)}
.gx-kpi-warning .gx-kpi-chip{color:#8a5300;background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.24)}
.gx-kpi-danger .gx-kpi-chip{color:#a32014;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.22)}
.gx-kpi-info .gx-kpi-chip,.gx-kpi-primary .gx-kpi-chip{color:var(--gx-blue);background:var(--gx-grad-soft);border-color:rgba(11,99,246,.18)}
.gx-kpi-neutral .gx-kpi-chip{color:var(--gx-n-600);background:var(--gx-n-100);border-color:var(--gx-n-200)}
.gx-scope .gt-card,.gx-card{background:var(--gt-surface,var(--gx-n-0));border:1px solid var(--gt-border,var(--gx-n-200));border-radius:var(--gx-r-16);box-shadow:var(--gx-e1);overflow:hidden}
.gx-scope .gt-card-header,.gx-card .gt-card-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--gt-border,var(--gx-n-200));background:linear-gradient(180deg,var(--gx-n-25),var(--gt-surface,var(--gx-n-0)))}
.gx-scope .gt-card-title,.gx-card .gt-card-title{font-size:var(--gx-t-16);font-weight:700;letter-spacing:-.005em;color:var(--gt-text,var(--gx-n-900))}
.gx-scope .gt-card-subtitle,.gx-card .gt-card-subtitle{margin:4px 0 0;font-size:13px;color:var(--gt-text-muted,var(--gx-n-500));max-width:78ch}
.gx-scope .gt-card-body,.gx-card .gt-card-body{padding:18px}
.gx-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 var(--gx-s-3)}
.gx-section-title{margin:0;font-size:var(--gx-t-20);font-weight:750;letter-spacing:-.01em;color:var(--gt-text,var(--gx-n-900))}
.gx-section-sub{margin:4px 0 0;font-size:13px;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-divider{display:flex;align-items:center;gap:12px;margin:var(--gx-s-5) 0 var(--gx-s-4);color:var(--gt-text-muted,var(--gx-n-500));font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.gx-divider::before{content:"";flex:0 0 28px;height:2px;border-radius:2px;background:var(--gx-grad)}
.gx-divider::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,var(--gt-border,var(--gx-n-200)),transparent)}
.gx-scope .gt-badge,.gx-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--gx-r-pill);font-size:11.5px;font-weight:650;line-height:1.5;border:1px solid transparent}
.gx-empty,.gx-scope .gt-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;text-align:center}
.gx-empty-art{width:132px;max-width:60%;height:auto;margin-bottom:8px}
.gx-empty-title,.gx-scope .gt-empty-title{margin:0;font-size:var(--gx-t-16);font-weight:700;color:var(--gt-text,var(--gx-n-900))}
.gx-empty-message,.gx-scope .gt-empty-message{margin:0;max-width:52ch;font-size:13.5px;line-height:1.55;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-empty .gx-btn{margin-top:10px}
.gx-scope .form-group>label,.gx-scope .form-label{font-size:13px;font-weight:650;color:var(--gt-text,var(--gx-n-700));margin-bottom:6px}
.gx-scope .form-control{min-height:44px;padding:10px 12px;border-radius:var(--gx-r-12);border:1px solid var(--gt-border,var(--gx-n-200));background:var(--gt-surface,var(--gx-n-0));font-family:var(--gx-font);font-size:var(--gx-t-14);color:var(--gt-text,var(--gx-n-900));transition:border-color .14s ease,box-shadow .14s ease}
.gx-scope .form-control:focus{border-color:var(--gx-blue);box-shadow:0 0 0 3px rgba(34,211,238,.32);outline:none}
.gx-scope .form-control:hover:not(:focus){border-color:var(--gx-n-300)}
.gx-scope .form-hint{font-size:12.5px;line-height:1.5;color:var(--gt-text-muted,var(--gx-n-500));margin-top:6px}
.gx-scope .form-error{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:#a32014}
.gx-scope .form-check{align-items:center;gap:10px;min-height:32px;font-size:13.5px;color:var(--gt-text,var(--gx-n-700))}
.gx-scope .form-check input[type="checkbox"]{width:18px;height:18px;accent-color:var(--gx-blue)}
.gx-scope .gt-table tbody tr:hover{background:var(--gx-grad-soft)}
.gx-scope .gt-table thead th{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--gt-text-muted,var(--gx-n-500));background:var(--gx-n-50);border-bottom:1px solid var(--gt-border,var(--gx-n-200))}
@media (max-width: 719px){.gx-dashboard .gt-table-wrap,.gx-card .gt-table-wrap{overflow:visible;border:0;background:transparent;box-shadow:none}
.gx-dashboard .gt-table,.gx-card .gt-table,.gx-dashboard .gt-table tbody,.gx-card .gt-table tbody,.gx-dashboard .gt-table tfoot,.gx-card .gt-table tfoot{display:block;width:100%;min-width:0;border:0;background:transparent}
.gx-dashboard .gt-table thead,.gx-card .gt-table thead{display:none}
.gx-dashboard .gt-table tbody tr,.gx-card .gt-table tbody tr{display:block;margin:0 0 10px;padding:6px 12px;border:1px solid var(--gt-border,var(--gx-n-200));border-radius:var(--gx-r-12);background:var(--gt-surface,var(--gx-n-0))}
.gx-dashboard .gt-table tbody tr:nth-child(even),.gx-card .gt-table tbody tr:nth-child(even){background:var(--gt-surface,var(--gx-n-0))}
.gx-dashboard .gt-table tbody td,.gx-card .gt-table tbody td{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:7px 0;border:0;text-align:right;overflow-wrap:anywhere}
.gx-dashboard .gt-table tbody td::before,.gx-card .gt-table tbody td::before{content:attr(data-label);flex:0 1 auto;font-size:12px;font-weight:650;color:var(--gt-text-muted,var(--gx-n-500));text-align:left}
.gx-dashboard .gt-table tbody td:empty,.gx-card .gt-table tbody td:empty{display:none}
.gx-dashboard .gt-table tbody td.gt-table-actions,.gx-card .gt-table tbody td.gt-table-actions{justify-content:flex-end;padding-bottom:10px}
.gx-dashboard .gt-table tbody td.gt-table-actions::before,.gx-card .gt-table tbody td.gt-table-actions::before{content:"";display:none}
.gx-dashboard .gt-table tfoot tr,.gx-card .gt-table tfoot tr{display:block;padding:10px 12px;border-radius:var(--gx-r-12);background:var(--gx-grad-soft)}
.gx-dashboard .gt-table tfoot td,.gx-card .gt-table tfoot td{display:flex;justify-content:space-between;gap:12px;border:0}}
.gx-dashboard .gt-page-header,.gx-dashboard .gt-breadcrumbs{display:none}
.gx-dash-cols{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--gx-s-4);align-items:start;margin-bottom:var(--gx-s-4)}
.gx-dash-col{display:flex;flex-direction:column;gap:var(--gx-s-4);min-width:0}
.gx-dashboard .gt-timeline-card{margin:0;padding:0;background:var(--gt-surface,var(--gx-n-0));border:1px solid var(--gt-border,var(--gx-n-200));border-radius:var(--gx-r-16);box-shadow:var(--gx-e1);overflow:hidden}
.gx-dashboard .gt-timeline-card>h2{margin:0;padding:14px 18px;font-size:var(--gx-t-16);font-weight:700;border-bottom:1px solid var(--gt-border,var(--gx-n-200));background:linear-gradient(180deg,var(--gx-n-25),var(--gt-surface,var(--gx-n-0)))}
.gx-dashboard .gt-timeline{padding:14px 18px;margin:0}
.gx-quick-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.gx-quick-list{display:flex;flex-wrap:wrap;gap:8px}
.gx-quick-list .gx-btn{flex:1 1 46%;justify-content:flex-start;min-height:44px;font-weight:600}
.gx-quick-group-title{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-dashboard .gt-dashboard-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--gx-s-4);align-items:start;margin-bottom:var(--gx-s-4)}
.gx-dashboard .gt-dashboard-chart,.gx-dashboard .gt-dashboard-top{display:flex;flex-direction:column;gap:var(--gx-s-4);min-width:0}
.gx-dashboard .gt-chart{margin:0;padding:16px 18px;background:var(--gt-surface,var(--gx-n-0));border:1px solid var(--gt-border,var(--gx-n-200));border-radius:var(--gx-r-16);box-shadow:var(--gx-e1)}
.gx-pending-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gx-pending-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--gx-r-12);border:1px solid var(--gt-border,var(--gx-n-200));background:var(--gt-surface,var(--gx-n-0));box-shadow:var(--gx-e1);color:inherit}
.gx-pending-card:hover{border-color:var(--gx-blue);box-shadow:var(--gx-e2);text-decoration:none}
.gx-pending-count{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 8px;border-radius:var(--gx-r-12);background:var(--gx-grad);color:#fff;font-size:var(--gx-t-16);font-weight:750}
.gx-pending-label{font-size:13px;font-weight:600;color:var(--gt-text,var(--gx-n-700));line-height:1.35}
.gx-web-hero{position:relative;overflow:hidden;margin:0 0 var(--gx-s-5);padding:36px 32px;border-radius:20px;border:1px solid var(--gt-border,var(--gx-n-200));background:radial-gradient(120% 140% at 100% 0%,rgba(34,211,238,.18) 0%,rgba(11,99,246,.04) 46%,transparent 70%),var(--gt-surface,#fff);box-shadow:var(--gx-e2)}
.gx-web-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(11,99,246,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,99,246,.05) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(80% 80% at 20% 0%,#000 10%,transparent 75%);-webkit-mask-image:radial-gradient(80% 80% at 20% 0%,#000 10%,transparent 75%);pointer-events:none}
.gx-web-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:28px;align-items:center}
.gx-web-brand{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px;min-width:0}
.gx-web-brand-logo{width:52px;height:52px;flex:0 0 52px;border-radius:14px;object-fit:contain;background:#fff;border:1px solid var(--gt-border,var(--gx-n-200));padding:6px;box-shadow:var(--gx-e1)}
.gx-web-brand-name{font-size:var(--gx-t-16);font-weight:750;letter-spacing:-.01em;color:var(--gt-text,var(--gx-n-900));line-height:1.25;overflow-wrap:anywhere}
.gx-web-brand-sub{display:block;font-size:12.5px;font-weight:500;color:var(--gt-text-muted,var(--gx-n-500));letter-spacing:.01em}
.gx-web-title{margin:0 0 10px;font-size:clamp(26px,3.4vw,38px);line-height:1.1;font-weight:800;letter-spacing:-.025em;color:var(--gt-text,var(--gx-n-900));overflow-wrap:anywhere}
.gx-web-sub{margin:0 0 20px;max-width:60ch;font-size:var(--gx-t-16);line-height:1.6;color:var(--gt-text-muted,var(--gx-n-600))}
.gx-web-actions{display:flex;flex-wrap:wrap;gap:10px}
.gx-web-hero-art{position:relative;display:flex;justify-content:center;align-items:center}
.gx-web-hero-art img{width:min(100%,340px);height:auto;filter:drop-shadow(0 18px 30px rgba(11,99,246,.18))}
.gx-web-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;font-size:13px;color:var(--gt-text-muted,var(--gx-n-600))}
.gx-web-trust li{display:inline-flex;align-items:center;gap:6px}
.gx-web-trust .gx-icon{color:var(--gx-blue)}
.gx-storefront .gt-store-picker-head{margin-bottom:var(--gx-s-4)}
.gx-storefront .gt-store-picker-title{font-size:var(--gx-t-24);font-weight:750;letter-spacing:-.015em}
.gx-storefront .gt-store-picker-sub{font-size:13.5px;line-height:1.6;max-width:68ch}
.gx-storefront .gt-store-card{border-radius:var(--gx-r-16);border-width:1px;box-shadow:var(--gx-e1);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.gx-storefront .gt-store-card:hover,.gx-storefront .gt-store-card:focus-visible{transform:translateY(-2px);box-shadow:var(--gx-e2);border-color:var(--gx-blue)}
.gx-storefront .gt-store-card.is-primary{border-color:var(--gx-blue);box-shadow:var(--gx-e3)}
.gx-storefront .gt-store-card-badge{background:var(--gx-grad);color:#fff;border:0}
.gx-storefront .gt-store-card-logo{border-radius:var(--gx-r-12)}
.gx-storefront .gt-katalog-card{border-radius:var(--gx-r-16);box-shadow:var(--gx-e1);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.gx-storefront .gt-katalog-card:hover{transform:translateY(-3px);box-shadow:var(--gx-e2);border-color:var(--gx-blue)}
.gx-storefront .gt-katalog-card-price{font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.gx-storefront .gt-katalog-chip{border-radius:var(--gx-r-pill);padding:7px 14px;font-weight:600;background:var(--gt-surface,#fff);border:1px solid var(--gt-border,var(--gx-n-200));box-shadow:var(--gx-e1)}
.gx-storefront .gt-katalog-chip.is-active{background:var(--gx-grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(11,99,246,.24)}
.gx-storefront .gt-store-banner{border-radius:var(--gx-r-12);box-shadow:var(--gx-e1)}
.gx-storefront .gt-landing-section-title,.gx-storefront .gt-katalog-hero-title{font-weight:780;letter-spacing:-.02em}
.gx-storefront .gt-katalog-hero{border-radius:20px;box-shadow:var(--gx-e2)}
.gx-auth .gt-public-content{padding-top:var(--gx-s-4)}
.gx-auth-shell{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);max-width:1040px;margin:12px auto 8px;border-radius:20px;border:1px solid var(--gt-border,var(--gx-n-200));background:var(--gt-surface,#fff);box-shadow:var(--gx-e3);overflow:hidden}
.gx-auth-aside{position:relative;display:flex;flex-direction:column;gap:16px;padding:32px 28px;color:#fff;background:linear-gradient(150deg,#0B63F6 0%,#1f9be0 55%,#22D3EE 100%);overflow:hidden}
.gx-auth-aside::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 85% 12%,rgba(255,255,255,.22),transparent 45%);pointer-events:none}
.gx-auth-aside-art{position:absolute;right:-60px;bottom:-70px;width:300px;max-width:85%;opacity:.34;pointer-events:none}
.gx-auth-aside>*:not(.gx-auth-aside-art){position:relative;z-index:1}
.gx-auth-brand{display:inline-flex;align-items:center;gap:10px;color:#fff;min-width:0}
.gx-auth-brand:hover{text-decoration:none;color:#fff}
.gx-auth-brand-logo{width:42px;height:42px;flex:0 0 42px;border-radius:12px;object-fit:contain;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);padding:5px}
.gx-auth-brand-name{font-size:var(--gx-t-16);font-weight:750;letter-spacing:-.01em;overflow-wrap:anywhere}
.gx-auth-brand-sub{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.82)}
.gx-auth-aside-lead{margin:6px 0 0;font-size:var(--gx-t-16);line-height:1.55;font-weight:600;color:#fff;max-width:30ch}
.gx-auth-benefits{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:rgba(255,255,255,.96)}
.gx-auth-benefits li{display:flex;align-items:flex-start;gap:9px;line-height:1.45}
.gx-auth-benefits .gx-icon{margin-top:1px;color:#fff;opacity:.9}
.gx-auth-panel{padding:32px 30px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.gx-auth-head{margin-bottom:18px}
.gx-auth-title{margin:0 0 5px;font-size:var(--gx-t-24);line-height:1.25;font-weight:780;letter-spacing:-.02em;color:var(--gt-text,var(--gx-n-900))}
.gx-auth-sub{margin:0;font-size:13.5px;line-height:1.55;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-auth .form-group{margin-bottom:14px}
.gx-auth .form-control{min-height:46px}
.gx-auth .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gx-auth .form-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gx-auth .gt-alert{border-radius:var(--gx-r-12);font-size:13px;line-height:1.5}
.gx-auth-note{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:10px 12px;border-radius:var(--gx-r-12);background:var(--gx-grad-soft);border:1px solid rgba(11,99,246,.16);font-size:12.5px;line-height:1.5;color:var(--gt-text-muted,var(--gx-n-600))}
.gx-auth-note .gx-icon{color:var(--gx-blue);margin-top:1px}
.gx-auth-note a{font-weight:650}
.gx-auth-submit{width:100%;margin-top:6px}
.gx-auth-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--gt-border,var(--gx-n-200))}
.gx-auth-link{font-size:13px;font-weight:600;color:var(--gx-blue)}
.gx-auth-link-muted{font-size:13px;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-auth-fine{margin:14px 0 0;font-size:11.5px;text-align:center;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-auth-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@media (max-width: 1180px){.gx-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width: 1024px){.gx-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.gx-dash-cols,.gx-dashboard .gt-dashboard-main{grid-template-columns:minmax(0,1fr)}
.gx-web-hero-inner{grid-template-columns:minmax(0,1fr);gap:20px}
.gx-web-hero-art{display:none}
.gx-auth-shell{grid-template-columns:minmax(0,1fr);max-width:620px}
.gx-auth-aside{padding:22px 24px}
.gx-auth-aside-lead{max-width:none;font-size:15px}
.gx-auth-benefits{flex-direction:row;flex-wrap:wrap;gap:8px 18px;margin-top:4px;font-size:12.5px}
.gx-auth-aside-art{width:220px;opacity:.22}}
@media (max-width: 768px){.gx-hero{padding:18px 18px 18px 20px}
.gx-hero-title{font-size:var(--gx-t-20)}
.gx-hero-actions{width:100%}
.gx-web-hero{padding:24px 20px;border-radius:var(--gx-r-16)}
.gx-scope .gt-card-body,.gx-card .gt-card-body{padding:16px}
.gx-scope .gt-card-header,.gx-card .gt-card-header{padding:14px 16px}
.gx-auth-panel{padding:24px 20px}}
@media (max-width: 560px){.gx-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gx-kpi{padding:12px;gap:9px}
.gx-kpi-chip{width:34px;height:34px;flex:0 0 34px;border-radius:10px}
.gx-kpi-value{font-size:18px}
.gx-kpi-label{font-size:11.5px}
.gx-scope-badge{max-width:100%}
.gx-hero-actions .gx-btn{flex:1 1 46%}
.gx-auth .form-row,.gx-auth .form-row-3{grid-template-columns:minmax(0,1fr);gap:0}
.gx-web-title{font-size:26px}}
@media (max-width: 390px){.gx-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gx-kpi{padding:10px}
.gx-kpi-chip{width:30px;height:30px;flex:0 0 30px}
.gx-kpi-chip .gx-icon{width:16px;height:16px}
.gx-kpi-value{font-size:16.5px}
.gx-hero-actions .gx-btn{flex:1 1 100%}
.gx-web-hero{padding:20px 16px}}
@media (max-width: 720px){.gx-scope .btn,.gx-scope .gx-btn,.gx-scope .form-control,.gx-auth .btn,.gx-auth .form-control{min-height:44px}
.gx-scope .btn-icon{min-width:44px;min-height:44px}
.gx-storefront .gt-katalog-chip{padding:12px 16px}}
[data-theme="dark"] .gx-scope{--gx-blue:#6aa5ff;--gx-cyan:#4dd7ee;--gx-grad:linear-gradient(135deg,#2f7bff 0%,#22b8d6 100%);--gx-grad-soft:linear-gradient(135deg,rgba(47,123,255,.18) 0%,rgba(34,184,214,.16) 100%);--gx-blue-dark:#9cc2ff;--gx-n-0:#161d2c;--gx-n-25:#1a2231;--gx-n-50:#1c2536;--gx-n-100:#222c40;--gx-n-200:#2f3a50;--gx-n-300:#43506b;--gx-n-400:#7d8aa2;--gx-n-500:#a3b0c6;--gx-n-600:#c2ccdd;--gx-n-700:#dbe3ef;--gx-n-900:#eef3fb;--gx-e1:0 1px 2px rgba(0,0,0,.4);--gx-e2:0 2px 6px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.32);--gx-e3:0 18px 42px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35)}
[data-theme="dark"] .gx-scope .gt-kpi,[data-theme="dark"] .gx-scope .gt-card,[data-theme="dark"] .gx-card,[data-theme="dark"] .gx-hero,[data-theme="dark"] .gx-web-hero,[data-theme="dark"] .gx-pending-card{background:var(--gt-surface,var(--gx-n-0));border-color:var(--gt-border,var(--gx-n-200))}
[data-theme="dark"] .gx-scope .gt-card-header,[data-theme="dark"] .gx-card .gt-card-header{background:linear-gradient(180deg,var(--gx-n-50),var(--gt-surface,var(--gx-n-0)))}
[data-theme="dark"] .gx-delta.is-up{color:#8ce4b4;background:rgba(16,185,129,.18)}
[data-theme="dark"] .gx-delta.is-down{color:#ffb0a8;background:rgba(239,68,68,.18)}
[data-theme="dark"] .gx-kpi-success .gx-kpi-chip{color:#8ce4b4;background:rgba(16,185,129,.16)}
[data-theme="dark"] .gx-kpi-warning .gx-kpi-chip{color:#f7cf7d;background:rgba(245,158,11,.16)}
[data-theme="dark"] .gx-kpi-danger .gx-kpi-chip{color:#ffb0a8;background:rgba(239,68,68,.16)}
[data-theme="dark"] .gx-kpi-neutral .gx-kpi-chip{color:var(--gx-n-600);background:var(--gx-n-100)}
[data-theme="dark"] .gx-web-brand-logo{background:var(--gx-n-50)}
[data-theme="dark"] .gx-web-hero{background:radial-gradient(120% 140% at 100% 0%,rgba(34,211,238,.14) 0%,rgba(11,99,246,.05) 46%,transparent 70%),var(--gt-surface,var(--gx-n-0))}
[data-theme="dark"] .gx-storefront .gt-katalog-chip{background:var(--gt-surface,var(--gx-n-0))}
@media (prefers-reduced-motion: reduce){.gx-scope *,.gx-btn,.gx-scope .btn{transition:none !important;animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}.gx-btn:hover,.gx-scope .btn:hover,.gx-kpi:hover{transform:none}}
@media print{.gx-hero::after,.gx-web-hero::before,.gx-auth-aside-art{display:none !important}
.gx-auth-aside{background:none !important;color:#000 !important}}
.gx-hero-note{margin:6px 0 0;font-size:12px;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-kpi-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.gx-kpi-compact .gx-kpi{padding:12px;border-radius:var(--gx-r-12);box-shadow:none;background:var(--gt-surface-2,var(--gx-n-50));border-color:transparent}
.gx-kpi-compact .gx-kpi:hover{transform:none;box-shadow:none}
.gx-kpi-compact .gx-kpi-value{font-size:20px}
.gx-kpi-compact .gx-kpi-chip{width:32px;height:32px;flex:0 0 32px}
@media (max-width:560px){.gx-kpi-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gx-kpi-compact .gx-kpi{padding:10px}
.gx-kpi-compact .gx-kpi-value{font-size:17px}}
.gx-storefront .gx-btn-primary{background:linear-gradient(135deg,var(--gt-primary,#0B63F6) 0%,var(--gx-cyan) 100%)}
.gx-storefront .gx-btn-primary:hover{background:linear-gradient(135deg,var(--gt-primary-hover,var(--gt-primary,#0B63F6)) 0%,var(--gx-cyan) 100%)}
.gx-storefront .gx-web-hero{border-top:3px solid var(--gt-primary,#0B63F6)}
.gx-storefront .gt-katalog-chip.is-active{background:linear-gradient(135deg,var(--gt-primary,#0B63F6) 0%,var(--gx-cyan) 100%)}
.gx-storefront .gt-landing-section-head{align-items:center}
@media (max-width:720px){.gx-storefront .gt-katalog-card-actions{align-items:stretch;gap:8px}
.gx-storefront .gt-katalog-card-actions .btn{min-height:44px}
.gx-storefront .gt-katalog-card-actions .gt-katalog-add{width:100%;min-width:0;flex:0 0 auto;flex-wrap:wrap;gap:8px;justify-content:space-between}
.gx-storefront .gt-qty-stepper button{min-width:44px;height:44px}
.gx-storefront .gt-qty-stepper input{height:44px}
.gx-storefront .gt-katalog-card-actions form{margin:0}}
.gx-storefront.gt-katalog{max-width:1240px;margin:0 auto;padding-left:16px;padding-right:16px}
.gx-storefront .gx-section-head{margin-bottom:12px}
.gx-storefront .gx-section-head .gt-page-title{font-size:20px}
@media (max-width:560px){.gx-storefront .gt-katalog-grid{grid-template-columns:minmax(0,1fr)}
.gx-storefront .gt-katalog-card-media{aspect-ratio:16/10}
.gx-storefront.gt-katalog{padding-left:12px;padding-right:12px}}
.gx-kpi-value{font-size:clamp(17px,1.55vw,23px);white-space:nowrap;overflow-wrap:normal;word-break:normal;text-overflow:ellipsis;overflow:hidden;max-width:100%}
.gx-kpi-compact .gx-kpi-value{font-size:clamp(16px,1.4vw,20px)}
@media (max-width:390px){.gx-kpi-value{font-size:16px}}

/* ==========================================================================
   W148 - GLOBAL ENTERPRISE BASE LAYER
   Structural, template-agnostic rules. Everything is namespaced under
   .gx-scope, which the application shell (layouts/main.php) and the public
   shell (layouts/public.php) now publish on <body> automatically, so every
   page inherits the Enterprise look without a per-view opt-in class.
   No page-specific selector is required below; the layer styles the generic
   element/class vocabulary every template already uses.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAYOUT CONTAINER + VERTICAL RHYTHM
   -------------------------------------------------------------------------- */
.gx-container{width:100%;max-width:1560px;margin-left:auto;margin-right:auto;min-width:0}
.gt-content>.gx-container,.gt-content>.gx-container>*{min-width:0}
.gx-scope{line-height:1.55}
.gx-scope :where(h1,h2,h3,h4,h5,h6){color:var(--gt-text,var(--gx-n-900));overflow-wrap:anywhere;text-wrap:balance}
.gx-scope :where(p,li,dd,dt,figcaption){overflow-wrap:anywhere}
.gx-scope :where(img,video,canvas,svg.media,iframe){max-width:100%}
.gx-scope :where(img,video,canvas){height:auto}
.gx-scope :where(pre,code){max-width:100%;overflow-x:auto}
.gx-scope :where(.text-mono,.gt-mono,.gt-table .text-mono){overflow-wrap:anywhere}
.gx-scope .text-muted{color:var(--gt-text-muted,var(--gx-n-500))}
.gx-scope .gt-page-header{margin-bottom:var(--gx-s-5);padding-bottom:var(--gx-s-4);border-bottom:1px solid var(--gt-border,var(--gx-n-200));align-items:flex-end;gap:var(--gx-s-4)}
.gx-scope .gt-page-header>div:first-child{min-width:0;flex:1 1 320px}
.gx-scope .gt-page-title{margin:0;font-size:clamp(1.28rem,1.5vw,1.55rem);line-height:1.22;font-weight:750;letter-spacing:-.015em;overflow-wrap:anywhere}
.gx-scope .gt-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gx-s-2)}
.gx-scope .gt-page-header-actions-only{justify-content:flex-end;border-bottom:0;padding-bottom:0;margin-bottom:var(--gx-s-3)}
.gx-scope .gt-page-header-actions-only .gt-page-actions{width:auto}
.gx-scope .gt-page-actions .btn{min-height:40px}
.gx-scope .gt-breadcrumbs{font-size:12.5px;margin-top:6px}
.gx-scope .gt-breadcrumbs-shell{margin:0 0 10px}
.gx-scope .gt-breadcrumbs-shell ol{margin:0}
.gx-scope .gt-breadcrumbs ol{gap:6px}
.gx-scope .gt-breadcrumbs li+li::before{color:var(--gt-border-strong,var(--gx-n-300))}
.gx-scope .gt-section-head,.gx-scope .gt-card-header{align-items:center}
.gx-scope .gt-divider,.gx-scope .gx-divider{margin-top:var(--gx-s-5)}

/* --------------------------------------------------------------------------
   2. CARDS (.gt-card + .card alias) AND PAGE BLOCKS
   -------------------------------------------------------------------------- */
.gx-scope .gt-card,.gx-scope .card,.gx-scope .gt-detail-card,.gx-scope .gt-page-block>*>.gt-card{min-width:0;max-width:100%}
.gx-scope .card{background:var(--gt-surface,var(--gx-n-0));border:1px solid var(--gt-border,var(--gx-n-200));border-radius:var(--gx-r-16);box-shadow:var(--gx-e1);overflow:hidden;margin-bottom:var(--gx-s-4)}
.gx-scope .gt-card{border-radius:var(--gx-r-16);box-shadow:var(--gx-e1);margin-bottom:var(--gx-s-4)}
.gx-scope .gt-card:last-child,.gx-scope .card:last-child{margin-bottom:0}
.gx-scope .card-body{padding:18px}
.gx-scope .card-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--gt-border,var(--gx-n-200));background:linear-gradient(180deg,var(--gx-n-25),var(--gt-surface,var(--gx-n-0)))}
.gx-scope .card-title{font-size:var(--gx-t-16);font-weight:700;margin:0;color:var(--gt-text,var(--gx-n-900))}

/* --------------------------------------------------------------------------
   3. TABLES - shell-level padding / borders / zebra + scroll wrapper
   -------------------------------------------------------------------------- */
.gx-scope table{max-width:100%}
.gx-scope .table-responsive,
.gx-scope .gt-table-wrap,
.gx-scope [class*="table-respons"]{display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.gx-scope .gt-card>.table-responsive:first-child,.gx-scope .gt-card>.gt-table-wrap:first-child{border-radius:var(--gx-r-16) var(--gx-r-16) 0 0}
.gx-scope .gt-table,
.gx-scope table.table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px;background:var(--gt-surface,var(--gx-n-0))}
.gx-scope .gt-table :where(th,td),
.gx-scope table.table :where(th,td){padding:11px 14px;border-bottom:1px solid var(--gt-border,var(--gx-n-200));vertical-align:middle;text-align:left}
.gx-scope .gt-table :where(thead th),
.gx-scope table.table :where(thead th){font-size:11.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;color:var(--gt-text-muted,var(--gx-n-500));background:var(--gt-surface-2,var(--gx-n-50));border-bottom:1px solid var(--gt-border-strong,var(--gx-n-300));white-space:nowrap}
.gx-scope .gt-table tbody tr:nth-child(even),
.gx-scope table.table tbody tr:nth-child(even){background:var(--gt-surface-2,var(--gx-n-50))}
.gx-scope .gt-table tbody tr:hover,
.gx-scope table.table tbody tr:hover{background:var(--gx-primary-soft,var(--gx-grad-soft))}
.gx-scope .gt-table tbody td,
.gx-scope table.table tbody td{color:var(--gt-text,var(--gx-n-700));overflow-wrap:break-word;word-break:normal}
.gx-scope .gt-table :where(tfoot td,tfoot th),
.gx-scope table.table :where(tfoot td,tfoot th){background:var(--gt-surface-3,var(--gx-n-100));font-weight:700;border-top:2px solid var(--gt-border-strong,var(--gx-n-300))}
.gx-scope .gt-table-actions{white-space:nowrap}
.gx-scope .gt-table-actions .btn{min-height:32px}
.gx-scope .gt-table .num,.gx-scope .gt-table .money{font-variant-numeric:tabular-nums;white-space:nowrap}

/* --------------------------------------------------------------------------
   4. FORMS - consistent, 44px-friendly controls
   -------------------------------------------------------------------------- */
.gx-scope :where(.form-control,.form-select,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="search"],input[type="tel"],input[type="url"],input[type="time"],select,textarea){
  font-family:var(--gx-font);font-size:var(--gx-t-14);color:var(--gt-text,var(--gx-n-900));
  background:var(--gt-surface,var(--gx-n-0));
  border:1px solid var(--gt-border,var(--gx-n-200));
  border-radius:var(--gx-r-12);
  min-height:42px;padding:9px 12px;max-width:100%;transition:border-color .14s ease,box-shadow .14s ease}
.gx-scope :where(textarea){min-height:96px;line-height:1.55;resize:vertical}
.gx-scope :where(select){padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--gx-n-500) 50%),linear-gradient(135deg,var(--gx-n-500) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 13px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;appearance:none}
.gx-scope :where(.form-control:focus,select:focus,textarea:focus,input:focus){outline:none;border-color:var(--gx-blue);box-shadow:0 0 0 3px rgba(34,211,238,.30)}
.gx-scope :where(.form-control:disabled,select:disabled,textarea:disabled,input:disabled,[readonly]){background:var(--gt-surface-2,var(--gx-n-50));color:var(--gt-text-muted,var(--gx-n-500));cursor:not-allowed}
.gx-scope :where(label,.form-label){font-size:13px;font-weight:650;color:var(--gt-text,var(--gx-n-700))}
.gx-scope :where(.form-group){margin-bottom:14px;min-width:0}
.gx-scope :where(.form-row,.form-row-2,.form-row-3){min-width:0}
.gx-scope :where(input[type="checkbox"],input[type="radio"]){width:18px;height:18px;min-height:0;accent-color:var(--gx-blue);vertical-align:-3px}
.gx-scope :where(.gt-checkbox,.form-check){display:flex;align-items:center;gap:9px;min-height:36px;font-size:13.5px}
.gx-scope :where(.form-control-sm,input.form-control-sm){min-height:34px;padding:5px 10px;font-size:13px;border-radius:var(--gx-r-8)}
.gx-scope :where(.form-hint,.form-error){font-size:12.5px;line-height:1.5}

/* --------------------------------------------------------------------------
   5. BUTTONS (.btn, .gt-btn aliases) - touch sizing handled below 720px
   -------------------------------------------------------------------------- */
.gx-scope .btn,.gx-scope .gt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--gx-r-12);font-family:var(--gx-font);font-size:var(--gx-t-14);font-weight:650;line-height:1.2;text-align:center;white-space:nowrap;max-width:100%;transition:transform .12s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
.gx-scope .btn.btn-sm,.gx-scope .gt-btn.gt-btn-sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:var(--gx-r-8)}
.gx-scope .btn.btn-lg,.gx-scope .gt-btn.gt-btn-lg{min-height:48px;padding:0 22px;font-size:var(--gx-t-16)}
.gx-scope .btn.btn-icon{min-width:40px;min-height:40px;padding:0;border-radius:var(--gx-r-12)}
.gx-scope .btn.btn-block,.gx-scope .gt-btn.btn-block{width:100%}
.gx-scope .btn:disabled,.gx-scope .btn.is-disabled{opacity:.55;cursor:not-allowed;transform:none}

/* --------------------------------------------------------------------------
   6. BADGES / ALERTS / PAGINATION / TABS / BREADCRUMBS
   -------------------------------------------------------------------------- */
.gx-scope .gt-badge,.gx-scope .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--gx-r-pill);font-size:11.5px;font-weight:650;line-height:1.5;border:1px solid transparent;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
.gx-scope .gt-alert,.gx-scope .alert{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin-bottom:var(--gx-s-3);border:1px solid var(--gt-border,var(--gx-n-200));border-left-width:4px;border-radius:var(--gx-r-12);font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}
.gx-scope .gt-alert>span,.gx-scope .gt-alert-message{flex:1 1 auto;min-width:0}
.gx-scope .gt-alert-success{border-left-color:var(--gt-success, #10693f)}
.gx-scope .gt-alert-error,.gx-scope .gt-alert-danger{border-left-color:var(--gt-danger, #ab2318)}
.gx-scope .gt-alert-warning{border-left-color:var(--gt-warning, #8a5300)}
.gx-scope .gt-alert-info{border-left-color:var(--gt-info, #0a5f7d)}
.gx-scope .gt-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px}
.gx-scope .gt-pagination-list li a,.gx-scope .gt-pagination-list li span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:0 10px;border:1px solid var(--gt-border,var(--gx-n-200));border-radius:var(--gx-r-8);background:var(--gt-surface,var(--gx-n-0));font-weight:600;font-size:13px}
.gx-scope .gt-pagination-list li.is-active a{background:var(--gx-grad);border-color:transparent;color:#fff}
.gx-scope .gt-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--gt-border,var(--gx-n-200));margin-bottom:var(--gx-s-4);max-width:100%}
.gx-scope .gt-tab{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border-radius:10px 10px 0 0;font-size:13.5px;font-weight:650;color:var(--gt-text-muted,var(--gx-n-500));white-space:nowrap}
.gx-scope .gt-tab.is-active{background:var(--gx-grad-soft);color:var(--gx-blue);box-shadow:inset 0 -2px 0 var(--gx-blue)}
.gx-scope .gt-breadcrumbs a{text-decoration:none}
.gx-scope .gt-breadcrumbs a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   7. EMPTY STATES + STATUS DOT (used by ~40 views)
   -------------------------------------------------------------------------- */
.gx-scope .gt-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;text-align:center;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-scope .gt-empty-title{margin:0;font-size:var(--gx-t-16);font-weight:700;color:var(--gt-text,var(--gx-n-900))}
.gx-scope .gt-empty-message{margin:0;max-width:52ch;font-size:13.5px;line-height:1.55}

/* --------------------------------------------------------------------------
   8. AUTO TABLE STACK (<=720px) - generic, no per-page markup needed
   Every gt-table inside the scope becomes a data-label card list, exactly like
   the dashboard. Print documents / receipts / invoices keep their paper layout.
   -------------------------------------------------------------------------- */
@media screen and (max-width:719.98px){
  .gx-scope .table-responsive,
  .gx-scope .gt-table-wrap{overflow-x:visible;overflow-y:visible;border-radius:0;background:transparent}
  .gx-scope table.gx-stack,
  .gx-scope .gt-table-wrap>table.gt-table,
  .gx-scope .table-responsive>table.gt-table,
  .gx-scope .gt-card table.gt-table,
  .gx-scope .gt-card table.table{
    display:block;width:100%;min-width:0;max-width:100%;border:0;background:transparent;font-size:13px}
  .gx-scope table.gx-stack:not(.gt-table-keep),
  .gx-scope .gt-table-wrap>table.gt-table:not(.gt-table-keep),
  .gx-scope .table-responsive>table.gt-table:not(.gt-table-keep){display:block}
  .gx-scope table.gt-print-table,
  .gx-scope table.gt-print-meta,
  .gx-scope table.gt-receipt-items,
  .gx-scope table.gt-receipt-totals,
  .gx-scope table.gt-invoice-table,
  .gx-scope table.gt-invoice-totals,
  .gx-scope table.gt-shipments-table,
  .gx-scope table.gt-table-keep{display:table;width:100%;min-width:0}
  .gx-scope table.gx-stack>thead,
  .gx-scope .gt-table-wrap>table.gt-table>thead,
  .gx-scope .table-responsive>table.gt-table>thead,
  .gx-scope .gt-card table.gt-table>thead{display:none}
  .gx-scope table.gx-stack>tbody,
  .gx-scope .gt-table-wrap>table.gt-table>tbody,
  .gx-scope .table-responsive>table.gt-table>tbody,
  .gx-scope .gt-card table.gt-table>tbody,
  .gx-scope table.gx-stack>tfoot,
  .gx-scope .gt-table-wrap>table.gt-table>tfoot{display:block;width:100%;min-width:0}
  .gx-scope table.gx-stack>tbody>tr,
  .gx-scope .gt-table-wrap>table.gt-table>tbody>tr,
  .gx-scope .table-responsive>table.gt-table>tbody>tr,
  .gx-scope .gt-card table.gt-table>tbody>tr{display:block;margin:0 0 10px;padding:6px 12px;border:1px solid var(--gt-border,var(--gx-n-200));border-radius:var(--gx-r-12);background:var(--gt-surface,var(--gx-n-0));box-shadow:var(--gx-e1)}
  .gx-scope table.gx-stack>tbody>tr:nth-child(even),
  .gx-scope .gt-table-wrap>table.gt-table>tbody>tr:nth-child(even){background:var(--gt-surface,var(--gx-n-0))}
  .gx-scope table.gx-stack>tbody>tr>td,
  .gx-scope .gt-table-wrap>table.gt-table>tbody>tr>td,
  .gx-scope .table-responsive>table.gt-table>tbody>tr>td,
  .gx-scope .gt-card table.gt-table>tbody>tr>td{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;width:auto;padding:7px 0;border:0;text-align:right;overflow-wrap:anywhere;white-space:normal}
  .gx-scope table.gx-stack>tbody>tr>td::before,
  .gx-scope .gt-table-wrap>table.gt-table>tbody>tr>td::before,
  .gx-scope .table-responsive>table.gt-table>tbody>tr>td::before,
  .gx-scope .gt-card table.gt-table>tbody>tr>td::before{content:attr(data-label);flex:0 1 auto;font-size:12px;font-weight:650;line-height:1.5;color:var(--gt-text-muted,var(--gx-n-500));text-align:left;overflow-wrap:anywhere}
  .gx-scope table.gx-stack>tbody>tr>td:empty,
  .gx-scope .gt-table-wrap>table.gt-table>tbody>tr>td:empty{display:none}
  .gx-scope table.gx-stack>tbody>tr>td.gt-table-actions,
  .gx-scope .gt-table-wrap>table.gt-table>tbody>tr>td.gt-table-actions{justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-bottom:10px}
  .gx-scope table.gx-stack>tbody>tr>td.gt-table-actions::before,
  .gx-scope .gt-table-wrap>table.gt-table>tbody>tr>td.gt-table-actions::before{content:"";display:none}
  .gx-scope table.gx-stack>tbody>tr>td .gt-table-actions{justify-content:flex-end;flex-wrap:wrap}
  .gx-scope table.gx-stack>tfoot>tr,
  .gx-scope .gt-table-wrap>table.gt-table>tfoot>tr{display:block;padding:10px 12px;border-radius:var(--gx-r-12);background:var(--gx-grad-soft)}
  .gx-scope table.gx-stack>tfoot>tr>td,
  .gx-scope .gt-table-wrap>table.gt-table>tfoot>tr>td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 0}
  .gx-scope .gt-table-actions .btn{min-height:38px}
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE CONTRACT
      >=1280 desktop (fixed sidebar) · <=1024 sidebar off-canvas (hamburger)
      <=768 primary grids 1-col · <=720 touch targets · <=390 phone single col
   -------------------------------------------------------------------------- */
@media screen and (max-width:1280px){
  .gx-container{max-width:100%}
}
@media screen and (max-width:1024px){
  .gx-scope .gt-page-header{gap:12px}
}
@media screen and (max-width:768px){
  .gx-scope .gt-page-header{flex-direction:column;align-items:stretch;padding-bottom:var(--gx-s-3);margin-bottom:var(--gx-s-4)}
  /* the desktop row uses flex-basis 320px; in a COLUMN header that basis became
     a 320px-tall title block, so reset it (W148). */
  .gx-scope .gt-page-header>div:first-child{flex:0 1 auto}
  .gx-scope .gt-page-actions{width:100%}
  .gx-scope .gt-page-actions .btn{flex:1 1 auto}
  .gx-scope .gt-detail-grid,
  .gx-scope .gt-dashboard-main,
  .gx-scope .gx-dash-cols,
  .gx-scope .gt-dashboard{grid-template-columns:minmax(0,1fr)}
  .gx-scope .gt-card-header{align-items:flex-start}
  .gx-scope .gt-card-body{padding:14px}
  .gx-scope .gt-card-body>*{min-width:0}
  .gx-scope .gt-stat-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .gx-scope .gt-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gx-scope .gt-breadcrumbs{font-size:12px}
  .gx-scope .gt-pagination{flex-direction:column;align-items:stretch}
  .gx-scope .gt-pagination-list{justify-content:center;flex-wrap:wrap}
  .gx-scope .gt-pagination-perpage{justify-content:center}
}
@media screen and (max-width:720px){
  .gx-scope .btn,.gx-scope .gt-btn,.gx-scope .gt-page-actions .btn{min-height:44px}
  .gx-scope .btn.btn-sm,.gx-scope .gt-btn.gt-btn-sm{min-height:44px;padding:0 14px;font-size:13.5px;border-radius:var(--gx-r-12)}
  .gx-scope .btn,.gx-scope .gt-btn{white-space:normal;line-height:1.25;padding-top:8px;padding-bottom:8px}
  .gx-scope .btn.btn-icon,.gx-scope .gt-icon-btn{min-width:44px;min-height:44px}
  .gx-scope .form-control,.gx-scope select,.gx-scope textarea,.gx-scope input[type="text"],.gx-scope input[type="search"],.gx-scope input[type="password"],.gx-scope input[type="email"],.gx-scope input[type="number"],.gx-scope input[type="date"]{min-height:44px}
  .gx-scope .form-control-sm{min-height:44px}
  .gx-scope .gt-notification-hint,.gx-scope .gt-user-trigger,.gx-scope .gt-alert-close{min-height:44px;min-width:44px}
  .gx-scope .gt-alert-close{display:inline-flex;align-items:center;justify-content:center}
  .gx-scope .gt-nav-link,.gx-scope .gt-menu-item>a{min-height:44px}
  .gx-scope .gt-menu-group-title{min-height:44px;padding-top:12px;padding-bottom:12px}
  .gx-scope summary{min-height:44px;display:flex;align-items:center;gap:6px}
  .gx-scope label:has(input[type="checkbox"]),.gx-scope label:has(input[type="radio"]){display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:6px 0;max-width:100%}
  .gx-scope input[type="checkbox"],.gx-scope input[type="radio"]{width:20px;height:20px;min-width:20px;min-height:20px;flex:0 0 20px}
  .gx-scope table.gx-stack td:has(> input[type="checkbox"]),
  .gx-scope .gt-table-wrap>table.gt-table td:has(> input[type="checkbox"]),
  .gx-scope table.gx-stack td:has(> input[type="radio"]),
  .gx-scope .gt-table-wrap>table.gt-table td:has(> input[type="radio"]){min-height:44px;align-items:center}
  .gx-scope .gt-tab{min-height:44px}
  .gx-scope .gt-pagination-list li a,.gx-scope .gt-pagination-list li span{min-width:44px;min-height:44px}
  .gx-scope .gt-breadcrumbs a{display:inline-flex;align-items:center;min-height:32px}
  .gx-scope .gt-table-actions .btn{min-height:44px}
  .gx-scope .gt-embed-responsive,.gx-scope .gt-preview-frame,.gx-scope iframe{max-width:100%}
}
@media screen and (max-width:390px){
  .gx-scope .gt-page-title{font-size:1.2rem}
  .gx-scope .gt-card-body{padding:12px}
  .gx-scope .gt-card-header{padding:12px}
  .gx-scope .gt-page-actions{flex-direction:column;align-items:stretch}
  .gx-scope .gt-page-actions .btn{width:100%;flex:1 1 100%}
  .gx-scope .gt-pagination{flex-direction:column;align-items:stretch;gap:8px}
  .gx-scope .gt-pagination-perpage{justify-content:center}
  .gx-scope .gt-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .gx-scope table.gx-stack>tbody>tr>td,
  .gx-scope .gt-table-wrap>table.gt-table>tbody>tr>td{padding:6px 0;gap:10px}
  .gx-scope .gt-table :where(th,td){padding:9px 10px}
}

/* --------------------------------------------------------------------------
   10. AUTH SURFACE (public layout) - enterprise card for login/reset screens
   -------------------------------------------------------------------------- */
.gx-scope.gx-auth .gt-public-content{padding-top:var(--gx-s-4)}
.gx-auth .gt-auth-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 16px 40px;min-height:calc(100dvh - 140px);max-width:520px;margin:0 auto}
.gx-auth .gt-auth-card{width:100%;max-width:480px;background:var(--gt-surface,var(--gx-n-0));border:1px solid var(--gt-border,var(--gx-n-200));border-radius:20px;box-shadow:var(--gx-e3);padding:30px 28px;overflow:hidden}
.gx-auth .gt-auth-header{text-align:center;margin-bottom:20px}
.gx-auth .gt-auth-logo{margin:0 auto 12px;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.gx-auth .gt-auth-logo img{max-width:56px;max-height:56px;border-radius:14px;object-fit:contain}
.gx-auth .gt-auth-title{margin:0 0 6px;font-size:var(--gx-t-24);font-weight:780;letter-spacing:-.02em;color:var(--gt-text,var(--gx-n-900));overflow-wrap:anywhere}
.gx-auth .gt-auth-subtitle{margin:0;font-size:13.5px;line-height:1.55;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-auth .form-control{min-height:46px}
.gx-auth .btn{min-height:46px;border-radius:var(--gx-r-12)}
.gx-auth .gt-auth-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--gt-border,var(--gx-n-200));font-size:13px;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-auth .gt-auth-footer a{font-weight:600}
.gx-auth .gt-auth-brand{margin:0;text-align:center;font-size:11.5px;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-auth .gt-alert{margin-bottom:14px}
.gx-auth .gt-input-group{position:relative;display:flex;align-items:center}
.gx-auth .gt-input-group .form-control{padding-right:52px}
.gx-auth .gt-input-group .btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:38px;min-width:38px;box-shadow:none}

/* --------------------------------------------------------------------------
   11. PUBLIC / STOREFRONT SURFACE - one container rhythm
   -------------------------------------------------------------------------- */
.gx-scope .gt-public-content{min-width:0}
.gx-scope .gt-public-content>.gt-container{max-width:1240px}
.gx-scope .gt-public-header-inner{min-width:0}
.gx-scope .gt-public-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gx-scope .gt-public-content :where(.gt-card,.gt-katalog-card,.gt-store-card,.gt-plan-card){min-width:0}
@media screen and (max-width:560px){
  .gx-scope .gt-public-nav{gap:6px}
  .gx-auth .gt-auth-card{padding:22px 18px;border-radius:16px}
}

/* --------------------------------------------------------------------------
   12. MISC STRUCTURAL GUARDS (no horizontal page scroll, ever)
   -------------------------------------------------------------------------- */
.gx-scope .gt-main,.gx-scope .gt-content,.gx-scope main,.gx-scope section{min-width:0}
.gx-scope :where(.row,.gt-row){min-width:0}
.gx-scope :where(.overflow-x,.gt-overflow-x){overflow-x:auto;max-width:100%}
@media screen and (max-width:390px){
  .gx-scope .gt-mobile-nav-link{min-height:52px}
  .gx-scope .gt-navbar-inner{gap:8px}
}

/* Print: the added layer must never change paper output. */
@media print{
  .gx-container{max-width:none !important}
  .gx-scope .gt-card,.gx-scope .card{box-shadow:none !important;border-color:#c8d0dc !important}
  .gx-scope table.gx-stack,.gx-scope .gt-table-wrap>table.gt-table{display:table !important;width:100% !important}
  .gx-scope table.gx-stack>thead,.gx-scope .gt-table-wrap>table.gt-table>thead{display:table-header-group !important}
  .gx-scope table.gx-stack>tbody>tr,.gx-scope .gt-table-wrap>table.gt-table>tbody>tr{display:table-row !important;box-shadow:none !important;border:0 !important;padding:0 !important}
  .gx-scope table.gx-stack>tbody>tr>td,.gx-scope .gt-table-wrap>table.gt-table>tbody>tr>td{display:table-cell !important;text-align:left !important}
  .gx-scope table.gx-stack>tbody>tr>td::before,.gx-scope .gt-table-wrap>table.gt-table>tbody>tr>td::before{content:none !important}
}

/* --------------------------------------------------------------------------
   13. W174 - /inventory stock table
   Eleven data columns + one action must fit a 1280 viewport WITHOUT a page-level
   (or even a container-level) horizontal scrollbar, so the table switches to a
   fixed layout with explicit column widths. Below 720px the generic gx-stack
   card layout takes over and none of this applies.
   -------------------------------------------------------------------------- */
.gx-scope .gt-inv-table table.gt-table{font-size:13px;min-width:0}
.gx-scope .gt-inv-table table.gt-table>thead>tr>th,
.gx-scope .gt-inv-table table.gt-table>tbody>tr>td,
.gx-scope .gt-inv-table table.gt-table>tfoot>tr>td{padding-left:6px;padding-right:6px}
.gx-scope .gt-inv-table .gt-inv-name{display:block;font-weight:650;line-height:1.3}
.gx-scope .gt-inv-table .gt-inv-code{display:block;font-size:11.5px;line-height:1.4;color:var(--gt-text-muted,var(--gx-n-500));font-variant-numeric:tabular-nums}
.gx-scope .gt-inv-table .gt-col-tight{white-space:normal;overflow-wrap:anywhere}
.gx-scope .gt-inv-table .gt-badge{white-space:nowrap}
.gx-scope .gt-inv-meta{margin:0;font-size:13px;line-height:1.5;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-scope .gt-inv-meta strong{color:var(--gt-text,var(--gx-n-900))}
@media screen and (min-width:720px){
  .gx-scope .gt-inv-table table.gt-table{table-layout:fixed;width:100%;font-size:12.5px}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th{white-space:normal;line-height:1.2;font-size:10.5px;letter-spacing:.02em}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(1){width:16%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(2){width:10%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(3){width:11%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(4){width:5.5%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(5){width:4.5%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(6){width:8%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(7){width:7%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(8){width:7%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(9){width:7%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(10){width:8.5%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(11){width:9.5%}
  .gx-scope .gt-inv-table table.gt-table>thead>tr>th:nth-child(12){width:7%}
  .gx-scope .gt-inv-table table.gt-table>tbody>tr>td{overflow:hidden}
  .gx-scope .gt-inv-table .gt-inv-action{padding:2px 5px;border:0;background:none;color:var(--gt-primary);font-weight:650;text-decoration:underline}
}
/* Stacked card layout (<=719px) keeps its own spacing. */
@media screen and (max-width:719.98px){
  .gx-scope .gt-inv-table table.gt-table>tbody>tr>td{padding-left:0;padding-right:0}
  .gx-scope .gt-inv-table .gt-col-tight{white-space:normal}
}

/* --------------------------------------------------------------------------
   14. W179 - "Atur Teks & Tampilan" (app/views/web_templates/settings.php)
   ONE screen for /admin-web/template/settings and
   /gesttech/website-templates/settings.

   Before: the form/preview split was an inline
   `grid-template-columns:minmax(0,1fr) minmax(320px,.9fr)`, which on a 360-430px
   phone left ~30px for the form column (labels broke one letter per line, the
   inputs collapsed to 70px) while the 320px preview column + its nowrap URL
   (460px) were clipped by .gt-card{overflow:hidden}. The page did not SCROLL
   sideways, it was just unusable.

   Now: phone = one column (header -> alert -> fields -> sticky save bar ->
   preview), every control full width, hints wrap, and the preview iframe can
   never dictate the page width. >=900px keeps the old two-column desktop
   layout (form + preview side by side).
   -------------------------------------------------------------------------- */
.gx-scope .gt-ts{display:block;min-width:0}
.gx-scope .gt-ts-header-main{min-width:0}
.gx-scope .gt-ts-header-meta{margin-top:2px;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.gx-scope .gt-ts-header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gx-scope .gt-ts-alert .gt-alert-message{overflow-wrap:anywhere}
/* .gt-col-mono is white-space:nowrap globally (ui.css) - that is what pushed the
   460px preview URL past the card edge. Inside this screen every mono string may
   wrap anywhere: URLs, hex colours, /b/<kode>/home. */
.gx-scope .gt-ts .gt-col-mono,
.gx-scope .gt-ts .gt-code{white-space:normal;overflow-wrap:anywhere;word-break:break-word}

/* ---- form + preview columns --------------------------------------------- */
.gx-scope .gt-ts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:18px;align-items:start}
.gx-scope .gt-ts-grid>*{min-width:0}
.gx-scope .gt-ts-form-card,
.gx-scope .gt-ts-preview{margin:0;min-width:0;max-width:100%}
.gx-scope .gt-ts .gt-card-body{min-width:0}
.gx-scope .gt-ts .gt-card-body>*{min-width:0}
.gx-scope .gt-ts .gt-card-subtitle{overflow-wrap:anywhere}

/* ---- fields: label above, control full width ---------------------------- */
.gx-scope .gt-ts-form{min-width:0}
.gx-scope .gt-ts-field{margin:0 0 18px;min-width:0}
.gx-scope .gt-ts-field:last-child{margin-bottom:0}
.gx-scope .gt-ts-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 6px;min-width:0;
  font-size:13px;font-weight:650;line-height:1.45;color:var(--gt-text,var(--gx-n-900))}
.gx-scope .gt-ts-label-text{min-width:0;overflow-wrap:anywhere}
.gx-scope .gt-ts-lock{max-width:100%;white-space:normal;line-height:1.35;text-align:left;flex:0 1 auto}
.gx-scope .gt-ts .form-control,
.gx-scope .gt-ts input[type="text"],
.gx-scope .gt-ts textarea,
.gx-scope .gt-ts select{display:block;width:100%;max-width:100%;min-width:0}
/* textareas keep their `rows` floor but grow with the text instead of being
   clipped (field-sizing is ignored by older browsers, rows still applies). */
.gx-scope .gt-ts textarea{min-height:96px;max-height:70vh;resize:vertical;field-sizing:content;overflow:auto}
.gx-scope .gt-ts-hint{margin:6px 0 0;font-size:12.5px;line-height:1.55;overflow-wrap:anywhere;color:var(--gt-text-muted,var(--gx-n-500))}
.gx-scope .gt-ts-hint:first-child{margin-top:0}
.gx-scope .gt-ts .is-locked>.form-control,
.gx-scope .gt-ts .is-locked>textarea{opacity:.9}

/* ---- tier fieldset ------------------------------------------------------ */
.gx-scope .gt-ts-tier{min-width:0;max-width:100%;margin:0 0 14px;padding:12px;border:1px solid var(--gt-border,var(--gx-n-200));border-radius:12px;background:var(--gt-surface,var(--gx-n-0))}
.gx-scope .gt-ts-tier:last-of-type{margin-bottom:18px}
.gx-scope .gt-ts-tier-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:0 8px;font-size:12.5px;font-weight:650;color:var(--gt-text,var(--gx-n-900))}

/* ---- colour field: readable swatch + hex chip --------------------------- */
.gx-scope .gt-ts-color{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gx-scope .gt-ts-color-input{flex:0 0 auto;width:52px;height:44px;min-height:44px;padding:3px;cursor:pointer;
  border:1px solid var(--gt-border-strong);border-radius:10px;background:var(--gt-surface)}
.gx-scope .gt-ts-color-value{flex:1 1 9ch;min-width:0;padding:8px 10px;border:1px dashed var(--gt-border,var(--gx-n-200));
  border-radius:8px;font-size:12.5px;line-height:1.45;overflow-wrap:anywhere;white-space:normal}

/* ---- image-select: thumbnail grid (2 columns on a phone) ---------------- */
.gx-scope .gt-ts-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin-top:2px;min-width:0}
.gx-scope .gt-ts .gt-ts-image{display:block;position:relative;min-width:0;max-width:100%;margin:0;padding:8px;
  border:2px solid var(--gt-border,var(--gx-n-200));border-radius:10px;background:var(--gt-surface,var(--gx-n-0));
  cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}
.gx-scope .gt-ts .gt-ts-image:hover{border-color:var(--gt-border-strong)}
.gx-scope .gt-ts .gt-ts-image.is-selected{border-color:var(--gt-primary);box-shadow:var(--gt-focus)}
.gx-scope .gt-ts .gt-ts-image input[type="radio"]{margin:0 6px 0 0;vertical-align:middle}
.gx-scope .gt-ts-image-label{display:inline;font-size:12.5px;line-height:1.35;overflow-wrap:anywhere;vertical-align:middle}
.gx-scope .gt-ts-image-thumb{display:block;width:100%;height:56px;object-fit:cover;border-radius:6px;margin-top:6px;background:var(--gt-surface-2)}

/* ---- preview card ------------------------------------------------------- */
.gx-scope .gt-ts-iframe{display:block;width:100%;max-width:100%;height:560px;border:1px solid var(--gt-border,var(--gx-n-200));
  border-radius:10px;background:#fff}
.gx-scope .gt-ts-url{margin:8px 0 0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}

/* ---- save bar (desktop: inline at the end of the form) ------------------ */
.gx-scope .gt-ts-savebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px;
  margin-top:4px;padding-top:14px;border-top:1px solid var(--gt-border,var(--gx-n-200))}
.gx-scope .gt-ts-save{min-height:44px;min-width:210px;padding-inline:18px}

/* ---- <=899px: ONE column, preview UNDER the form ------------------------ */
@media screen and (max-width:899.98px){
  .gx-scope .gt-ts-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .gx-scope .gt-ts-preview{order:1}
  .gx-scope .gt-ts-form-card{order:0}
}

/* ---- <=720px: phone - sticky save bar + 2-col thumbnails ---------------- */
@media screen and (max-width:720px){
  .gx-scope .gt-ts .gt-card-body{padding:14px}
  .gx-scope .gt-ts .gt-card-header{padding:12px 14px}
  /* .gt-card{overflow:hidden} would turn the card into the sticky scrollport
     and freeze the save bar, so this one card lets it stick to the page. */
  .gx-scope .gt-ts-form-card{overflow:visible;border-radius:var(--gt-radius)}
  .gx-scope .gt-ts-form-card>.gt-ts-card-header{border-radius:var(--gt-radius) var(--gt-radius) 0 0}
  .gx-scope .gt-ts-savebar{position:sticky;z-index:55;
    bottom:calc(var(--gt-mobile-nav-h,60px) + env(safe-area-inset-bottom,0px));
    justify-content:stretch;margin:16px -14px -14px;padding:10px 14px;
    background:var(--gt-surface);border-top:1px solid var(--gt-border,var(--gx-n-200));
    border-radius:0 0 var(--gt-radius) var(--gt-radius);
    box-shadow:0 -8px 20px rgba(15,23,42,.10)}
  .gx-scope .gt-ts-save{flex:1 1 100%;width:100%;min-height:46px}
  .gx-scope .gt-ts-images{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  /* the generic touch rule turns radio labels into inline-flex chips */
  .gx-scope .gt-ts .gt-ts-image{display:block;min-height:44px}
  .gx-scope .gt-ts-color-input{width:48px;height:46px}
  .gx-scope .gt-ts-iframe{height:min(62vh,420px)}
  .gx-scope .gt-ts-header-actions .btn{flex:1 1 auto;justify-content:center}
  .gx-scope .gt-ts-tier{padding:10px}
}
@media screen and (max-width:390px){
  .gx-scope .gt-ts .gt-card-body{padding:12px}
  .gx-scope .gt-ts-savebar{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
}

/* ---- the "HP" display mode is a SESSION preference: at 1280 the viewport is
   wide while the shell renders the phone chrome, so the same single column
   applies instead of squeezing the form again. ------------------------- */
html[data-display-mode="hp"] .gx-scope .gt-ts-grid,
html[data-display-mode="hp"] .gt-ts-grid{grid-template-columns:minmax(0,1fr)}
html[data-display-mode="hp"] .gx-scope .gt-ts-form-card,
html[data-display-mode="hp"] .gt-ts-form-card{overflow:visible}
html[data-display-mode="hp"] .gx-scope .gt-ts-preview,
html[data-display-mode="hp"] .gt-ts-preview{order:1}
html[data-display-mode="hp"] .gx-scope .gt-ts-savebar,
html[data-display-mode="hp"] .gt-ts-savebar{position:sticky;z-index:55;
  bottom:calc(var(--gt-mobile-nav-h,60px) + env(safe-area-inset-bottom,0px));
  background:var(--gt-surface);border-top:1px solid var(--gt-border,var(--gx-n-200));
  box-shadow:0 -8px 20px rgba(15,23,42,.10)}

/* ==========================================================================
   W180 - TIER-SCALED IMAGE UPLOAD SLOTS + "CUSTOM HTML & CSS (PRO)" EDITOR
   --------------------------------------------------------------------------
   Admin surfaces: .gt-ts-* (image slot rows) and .gt-ce-* (the two-pane
   editor). Storefront: .gt-custom-* (the rendered MYTHIC+ block). Every rule
   is scoped so it cannot leak into another card/screen.
   ========================================================================== */

/* --- image upload slots (template settings) -------------------------------- */
.gt-ts-images{margin-top:var(--gt-space-5,20px)}
.gt-ts-pro{white-space:nowrap}
.gt-ts-pro-locked{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:5px 10px;border:1px dashed var(--gt-border-strong,#cbd5e1);border-radius:var(--gt-radius-sm,6px);
  font-size:var(--gt-font-size-sm,13px);color:var(--gt-text-muted,#64748b);background:var(--gt-surface-2,#f8fafc)}
.gt-ts-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.gt-ts-slot{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--gt-border,#e2e8f0);
  border-radius:var(--gt-radius-md,10px);background:var(--gt-surface,#fff);min-width:0}
.gt-ts-slot.is-locked{background:var(--gt-surface-2,#f8fafc);border-style:dashed}
.gt-ts-slot-media{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:
  repeating-conic-gradient(#f1f5f9 0% 25%,#fff 0% 50%) 50%/18px 18px;border:1px solid var(--gt-border,#e2e8f0)}
/* W181: one aspect box per slot of the FULL storefront asset set. */
.gt-ts-slot[data-image-slot="banner"] .gt-ts-slot-media{aspect-ratio:8/3}
.gt-ts-slot[data-image-slot="og_image"] .gt-ts-slot-media{aspect-ratio:1200/630}
.gt-ts-slot[data-image-slot="hero_desktop"] .gt-ts-slot-media{aspect-ratio:16/9}
.gt-ts-slot[data-image-slot="hero_mobile"] .gt-ts-slot-media{aspect-ratio:3/4}
.gt-ts-slot[data-image-slot="texture"] .gt-ts-slot-media{aspect-ratio:1/1}
.gt-ts-slot[data-image-slot="hero_svg"] .gt-ts-slot-media{aspect-ratio:16/9}
.gt-ts-slot-media img{width:100%;height:100%;object-fit:cover;display:block}
.gt-ts-slot-empty{font-size:12px;color:var(--gt-text-muted,#94a3b8)}
.gt-ts-slot-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.gt-ts-slot-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:14px;font-weight:600}
.gt-ts-slot-spec,.gt-ts-slot-meta{margin:0;font-size:12px;line-height:1.5}
.gt-ts-slot-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-top:2px}
.gt-ts-upload-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0;flex:1 1 220px}
.gt-ts-slot-file{flex:1 1 150px;min-width:0;font-size:12px;padding:5px 8px}
.gt-ts-upload-hint{flex-basis:100%;margin:0;font-size:11px}
.gt-ts-upload-hint.is-error{color:var(--gt-danger,#dc2626);font-weight:600}
.gt-ts-delete-form{display:inline-flex}
.gt-ts-slot-locked{margin:0;font-size:12px;line-height:1.5;color:var(--gt-text-muted,#64748b)}

/* ==========================================================================
   W182 - T1/T2: ACTIVE-TEMPLATE BANNER, "PANDUAN SINGKAT", AND THE PER-GROUP
   "WHERE DOES THIS APPEAR" PREVIEW (thumbnail + labelled wireframe + deep link)
   --------------------------------------------------------------------------
   Every rule is scoped to .gt-ts* so it cannot leak into another card, and
   every box is min-width:0 + overflow-wrap:anywhere so a 390px viewport can
   never scroll sideways.
   ========================================================================== */
.gt-ts-guide{margin:0 0 14px;min-width:0}
.gt-ts-guide-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;cursor:pointer;
  padding:14px 16px;font-weight:650;list-style-position:inside}
.gt-ts-guide-summary::-webkit-details-marker{color:var(--gt-primary,#1f6feb)}
.gt-ts-guide-title{font-size:14px;color:var(--gt-text,var(--gx-n-900))}
.gt-ts-guide-sub{font-size:12.5px;font-weight:400;margin:0;min-width:0;overflow-wrap:anywhere}
.gt-ts-guide-body{padding:0 16px 16px;min-width:0}
.gt-ts-guide-body p{margin:0 0 10px;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.gt-ts-guide-list{margin:0;padding-left:18px;font-size:13px;line-height:1.6;min-width:0}
.gt-ts-guide-list li{margin-bottom:6px;overflow-wrap:anywhere}
.gt-ts-guide-list li:last-child{margin-bottom:0}

.gt-ts-active{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;min-width:0}
.gt-ts-active .gt-alert-message{flex:1 1 320px;min-width:0;overflow-wrap:anywhere;line-height:1.6}
.gt-ts-active-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gt-ts-switch-form{display:inline-flex;margin:0}
.gt-ts-switch-form .btn{min-height:38px}

/* group preview: thumbnail beside the wireframe, stacking on a phone */
.gt-ts-where{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px;
  align-items:start;margin:8px 0 12px;min-width:0}
.gt-ts-where-thumb{margin:0;min-width:0;border:1px solid var(--gt-border,#e2e8f0);border-radius:10px;
  overflow:hidden;background:var(--gt-surface-2,#f8fafc)}
.gt-ts-where-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.gt-ts-where-thumb figcaption{padding:5px 8px;font-size:11px;line-height:1.35;
  color:var(--gt-text-muted,#64748b);overflow-wrap:anywhere}
.gt-ts-wire{display:flex;flex-direction:column;gap:3px;padding:8px;min-width:0;
  border:1px dashed var(--gt-border-strong,#cbd5e1);border-radius:10px;background:var(--gt-surface,#fff)}
.gt-ts-wire-title{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gt-text-muted,#94a3b8);margin-bottom:2px}
.gt-ts-wire-row{display:block;padding:3px 8px;border-radius:6px;font-size:11.5px;line-height:1.35;
  color:var(--gt-text-muted,#94a3b8);background:var(--gt-surface-2,#f8fafc);overflow-wrap:anywhere}
.gt-ts-wire-row.is-on{color:#fff;font-weight:650;background:var(--gt-primary,#1f6feb)}
.gt-ts-wire-note{display:block;margin-top:3px;font-size:11px;line-height:1.4;
  color:var(--gt-text-muted,#64748b);overflow-wrap:anywhere}
.gt-ts-where-link{display:inline-block;margin:0 0 12px;font-size:12.5px;font-weight:600;
  line-height:1.5;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:2px}

/* per-field "where" line: section chip + sentence + deep link */
.gt-ts-where-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 6px;
  font-size:12.5px;line-height:1.55;color:var(--gt-text-muted,#64748b);min-width:0;overflow-wrap:anywhere}
.gt-ts-where-chip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;
  font-size:11px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;
  color:var(--gt-primary,#1f6feb);background:color-mix(in srgb,var(--gt-primary,#1f6feb) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--gt-primary,#1f6feb) 28%,transparent);white-space:nowrap}
.gt-ts-where-go{font-size:12.5px;font-weight:600;white-space:nowrap}
.gt-ts-pro-tag{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.04em;vertical-align:middle;
  background:var(--gt-surface,#fff);color:var(--gt-primary,#1f6feb)}

@media (max-width:720px){
  .gt-ts-where{grid-template-columns:minmax(0,1fr)}
  .gt-ts-where-thumb img{aspect-ratio:16/9}
  .gt-ts-active .gt-alert-message{flex:1 1 100%}
  .gt-ts-active-actions{width:100%}
  .gt-ts-active-actions .btn{flex:1 1 auto;justify-content:center;min-height:44px}
}
@media (max-width:390px){
  .gt-ts-guide-summary{padding:12px}
  .gt-ts-guide-body{padding:0 12px 12px}
  .gt-ts-where-chip{white-space:normal}
}

/* --- custom HTML & CSS editor --------------------------------------------- */
.gt-ce-form{display:block}
.gt-ce-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid var(--gt-border,#e2e8f0);border-radius:var(--gt-radius-md,10px);
  background:var(--gt-surface,#fff);margin-bottom:14px}
.gt-ce-toggle{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;cursor:pointer}
.gt-ce-meta{font-size:12px;margin:0}
.gt-ce-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.gt-ce-pane{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--gt-border,#e2e8f0);
  border-radius:var(--gt-radius-md,10px);background:var(--gt-surface,#fff);min-width:0}
.gt-ce-pane-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gt-ce-pane-header .gt-card-title{font-size:14px;margin:0}
.gt-ce-counter{font-variant-numeric:tabular-nums;font-size:12px;color:var(--gt-text-muted,#64748b);
  padding:2px 8px;border-radius:999px;background:var(--gt-surface-2,#f1f5f9);white-space:nowrap}
.gt-ce-code{width:100%;min-height:320px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,
  "Liberation Mono",monospace;font-size:12.5px;line-height:1.55;tab-size:2;
  background:#0f172a;color:#e2e8f0;border:1px solid #1e293b;border-radius:8px;padding:12px;
  white-space:pre;overflow:auto}
.gt-ce-code:focus{outline:2px solid var(--gt-primary,#1f6feb);outline-offset:1px}
.gt-ce-code[readonly]{opacity:.75;cursor:not-allowed}
.gt-ce-tokens{margin-top:16px}
.gt-ce-palette{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.gt-ce-token{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;
  padding:6px 10px;border:1px solid var(--gt-border-strong,#cbd5e1);border-radius:8px;background:var(--gt-surface,#fff)}
.gt-ce-token:hover{border-color:var(--gt-primary,#1f6feb);background:var(--gt-surface-2,#f8fafc)}
.gt-ce-token-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:600;
  color:var(--gt-primary,#1f6feb)}
.gt-ce-token-label{font-size:11px;color:var(--gt-text-muted,#64748b)}
.gt-ce-table-wrap{overflow-x:auto}
.gt-ce-table td,.gt-ce-table th{vertical-align:top;font-size:13px}
.gt-ce-example{font-size:12px;word-break:break-word}

@media (max-width:900px){
  .gt-ce-panes{grid-template-columns:minmax(0,1fr)}
  .gt-ce-code{min-height:240px}
}
@media (max-width:520px){
  .gt-ts-slot-actions{flex-direction:column;align-items:stretch}
  .gt-ts-upload-form{flex:1 1 auto}
  .gt-ce-toolbar{flex-direction:column;align-items:flex-start}
}

/* --- storefront: the custom block (between promo and footer) --------------- */
.gt-custom-block{display:block;width:100%}
.gt-custom-block .gt-custom-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;padding:24px max(16px,4vw)}
.gt-custom-block .gt-custom-product{display:flex;flex-direction:column;gap:6px;text-decoration:none;
  color:inherit;border:1px solid rgba(15,23,42,.10);border-radius:12px;overflow:hidden;background:#fff}
.gt-custom-block .gt-custom-product:hover{border-color:currentColor}
.gt-custom-block .gt-custom-product img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.gt-custom-block .gt-custom-product__name{padding:0 12px;font-weight:600;font-size:14px;line-height:1.35}
.gt-custom-block .gt-custom-product__price{padding:0 12px 12px;font-size:13px;color:#475569}
.gt-custom-block .gt-custom-stores{list-style:none;margin:0;padding:24px max(16px,4vw);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gt-custom-block .gt-custom-stores li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  border:1px solid rgba(15,23,42,.10);border-radius:10px;background:#fff}
.gt-custom-block .gt-custom-stores span{font-size:12px;color:#64748b}
.gt-custom-block .gt-custom-cta{display:inline-block;padding:10px 18px;border-radius:999px;
  background:#1f6feb;color:#fff;text-decoration:none;font-weight:600}