@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--blue:#0757bb;--blue2:#087de0;--cyan:#26b9f3;--navy:#092b55;--ink:#142338;--muted:#68778b;--line:#e1eaf3;--bg:#f5f8fc;--white:#fff;--green:#11845b;--red:#c43e48;--shadow:0 12px 32px rgba(14,53,99,.07)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:14px;line-height:1.55}h1,h2,h3,strong{font-family:Manrope,'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.topbar{height:78px;padding:0 max(28px,calc((100vw - 1240px)/2));display:flex;align-items:center;gap:34px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;min-width:220px}.brand-logo{display:block;width:255px;max-width:100%;height:62px;object-fit:contain;object-position:left center;flex-shrink:1}.brand b{display:block;font:800 15px Manrope;letter-spacing:.5px;color:#093e82}.brand small{display:block;font-size:9px;color:#6d8199;letter-spacing:.6px}.topbar nav{display:flex;align-items:center;gap:25px;flex:1}.topbar nav a{color:#50647c;font-size:13px;font-weight:600}.topbar nav a:hover{color:var(--blue)}.account{display:flex;align-items:center;gap:12px}.account form{margin:0}.username{font-weight:600}.role-pill,.count-pill{background:#e8f4ff;color:#0757bb;border-radius:30px;padding:5px 10px;font-size:11px;font-weight:700}.page{max-width:1240px;margin:28px auto 70px;padding:0 24px}.hero{position:relative;overflow:hidden;border-radius:23px;min-height:300px;background:linear-gradient(112deg,#063c8e 0%,#0876d6 55%,#22b7ec 100%);color:white;display:flex;align-items:center;padding:38px 44px;box-shadow:0 18px 45px #0657aa21}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,#ffffff13 60%,#ffffff13 61%,transparent 61%),linear-gradient(135deg,transparent 70%,#ffffff10 70%,#ffffff10 71%,transparent 71%);pointer-events:none}.hero-copy{position:relative;z-index:2;width:55%}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#1688d9}.hero .eyebrow{color:#b8e9ff}.hero h1{font-size:36px;line-height:1.17;letter-spacing:-1.3px;margin:14px 0}.hero h1 span{color:#9ee5ff}.hero p{max-width:420px;color:#e1f2ff;font-size:14px}.hero-tags{display:flex;gap:18px;flex-wrap:wrap;margin-top:25px;font-size:11px;color:#e2f6ff}.hero-art{position:absolute;right:0;top:0;bottom:0;width:45%;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.94;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent 0%,black 25%);}.hero-glow{position:absolute;width:280px;height:280px;right:12%;top:-180px;border-radius:50%;border:1px solid #ffffff30;box-shadow:0 0 0 35px #ffffff0c,0 0 0 70px #ffffff08;pointer-events:none}.stats{display:grid;grid-template-columns:repeat(3,1fr) 1.3fr;gap:14px;margin:18px 0}.stat{padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.stat span{display:block;color:var(--muted);font-size:11px}.stat strong{display:block;font-size:25px;color:var(--navy);margin-top:4px}.stat-action{display:flex;align-items:center;justify-content:center}.catalog-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:37px 0 20px}.catalog-head h2,.form-heading h1,.users-heading h1{margin:6px 0 1px;font-size:25px;letter-spacing:-.7px}.muted{color:var(--muted)}.catalog-head .muted{margin:3px 0 0;font-size:12px}.filters{display:flex;gap:8px;align-items:center}.searchbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;width:245px;height:41px}.searchbox span{font-size:24px;color:#7b91a9}.searchbox input{width:100%;border:0;outline:0;min-width:0}.filters select,.role-form select{height:41px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;color:#43556a;max-width:190px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:9px;padding:10px 15px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.16s}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(110deg,var(--blue),var(--blue2));color:white;box-shadow:0 5px 12px #0757bb21}.btn-outline{border-color:#cbdced;color:#0757bb;background:white}.btn-ghost{background:#eef4fa;color:#52677e}.btn-danger{background:#fff0f0;color:#b52e3b;border-color:#f7d9dc}.btn-sm{padding:7px 10px;font-size:11px}.btn-wide{width:100%;padding:13px}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.product-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:17px;min-width:0;box-shadow:0 4px 18px #173e6907;transition:transform .18s,box-shadow .18s}.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.product-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}.category-chip,.hidden-chip{font-size:10px;font-weight:700;padding:5px 9px;border-radius:6px;background:#edf7ff;color:#0875bf}.hidden-chip{background:#fff2e2;color:#a45b0a}.product-icon{height:94px;display:grid;place-items:center;margin:8px 0 2px;background:linear-gradient(140deg,#f4faff,#edf6ff);border-radius:12px}.product-icon svg{width:49px;height:61px;fill:none;stroke:#0876d6;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.product-code{font-size:10px;color:#1381d0;font-weight:800;letter-spacing:.8px;margin:12px 0 3px}.product-card h3{font-size:15px;line-height:1.35;margin:0;min-height:40px}.product-brand{font-size:11px;color:#75849a;margin:4px 0 0}.product-intro{font-size:11px;color:#52657b;line-height:1.5;min-height:32px;margin:12px 0}.product-bottom{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #edf1f6;padding-top:13px;margin-top:14px}.field-label{display:block;font-size:10px;color:#8390a1;margin-bottom:4px}.price{font-size:16px;color:#0757bb;letter-spacing:-.4px}.stock{text-align:right}.stock strong{font-size:15px;color:#283b52}.admin-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #edf1f6}.admin-actions form{margin:0}.empty{text-align:center;padding:65px 20px;background:#fff;border:1px dashed #cbd9e8;border-radius:17px}.empty-icon{margin:auto auto 12px;width:54px;height:54px;border-radius:18px;background:#e9f5ff;color:#0b75ce;display:grid;place-items:center;font-size:23px;font-weight:800}.empty h3,.empty h1{margin:8px 0}.empty p{color:var(--muted)}footer{border-top:1px solid var(--line);background:#fff;display:flex;justify-content:space-between;align-items:center;padding:22px max(28px,calc((100vw - 1190px)/2));font-size:11px;color:#8190a2}.footer-mark{font-weight:800;letter-spacing:1px;color:#0862ba}.flash-list{display:grid;justify-items:center;gap:8px;margin:0 auto 18px;width:100%}.flash{width:fit-content;max-width:100%;padding:12px 20px;border-radius:10px;font-size:12px;text-align:center;line-height:1.55;box-shadow:0 4px 14px rgba(14,53,99,.05)}.flash.success{background:#e7f8ef;color:#176c49}.flash.error{background:#fff0f0;color:#a82b37}.auth-wrap{min-height:570px;display:grid;place-items:center}.auth-card{width:min(100%,420px);padding:34px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.auth-logo{width:53px;height:53px;border-radius:16px;background:linear-gradient(140deg,#0757bb,#27b9f1);display:grid;place-items:center;color:#fff;font:800 20px Manrope;margin-bottom:22px}.auth-card h1{font-size:27px;margin:7px 0}.auth-card .muted{margin:0 0 24px}.form-stack{display:grid;gap:15px}.form-stack label,.form-grid>label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#34485e}.form-stack input,.form-stack select,.form-stack textarea,.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid #d7e2ed;border-radius:9px;padding:11px 12px;outline:none;background:#fff;color:var(--ink);font-weight:400;min-width:0}.form-stack input:focus,.form-stack textarea:focus,.form-grid input:focus,.form-grid textarea:focus,.form-stack select:focus,.form-grid select:focus{border-color:#248fe2;box-shadow:0 0 0 3px #1688d91b}.form-note{text-align:center;color:#8190a2;font-size:11px;margin:19px 0 0}.form-page{max-width:850px;margin:0 auto}.back-link{font-size:12px;color:#52718f;font-weight:700}.form-heading{margin:23px 0}.form-heading h1{font-size:29px}.form-heading p{margin:7px 0}.editor-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:25px;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 22px}.form-grid textarea{resize:vertical;line-height:1.65;min-height:92px}.form-grid label{align-content:start}.description-field textarea{min-height:150px}.photo-upload-section{margin-top:30px;padding-top:27px;border-top:1px solid #edf1f6}.photo-upload-section input[type=file]{padding:14px;background:#f8fbff;border:1px dashed #c8d9ea;min-height:54px}.photo-upload-section small{display:block;margin-top:3px;line-height:1.65}.form-grid .span-2{grid-column:span 2}.form-grid small{font-size:10px;color:#7d8da0;font-weight:400;line-height:1.4}.required{color:#d94850}.price-input{display:flex;border:1px solid #d7e2ed;border-radius:9px;overflow:hidden}.price-input span{display:grid;place-items:center;background:#f0f6fc;padding:0 13px;color:#526b84;border-right:1px solid #d7e2ed}.price-input input{border:0!important;border-radius:0!important;box-shadow:none!important}.visibility-setting{margin-top:23px;padding:17px;background:#f5f9fd;border:1px solid #e2edf7;border-radius:11px;display:flex;align-items:center;justify-content:space-between;gap:16px}.visibility-setting strong{font-size:12px}.visibility-setting p{font-size:11px;color:var(--muted);margin:4px 0 0}.switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#bdc9d6;border-radius:20px;cursor:pointer;transition:.2s}.switch span:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:white;transition:.2s;box-shadow:0 1px 3px #0002}.switch input:checked+span{background:#087de0}.switch input:checked+span:before{transform:translateX(18px)}.form-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:23px;padding-top:20px;border-top:1px solid #edf1f6}.users-heading{margin:15px 0 23px}.user-layout{display:grid;grid-template-columns:290px 1fr;gap:18px;align-items:start}.user-layout .editor-card h2{font-size:15px;margin:0 0 20px}.users-list{padding:21px}.users-list h2{display:flex;align-items:center;gap:10px}.user-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid #edf1f6;min-width:0}.avatar{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;background:#e8f4ff;border-radius:12px;color:#0864bd;font-weight:800}.user-info{min-width:95px;flex:1}.user-info strong{display:block;font-size:12px}.user-info small{font-family:'DM Sans';color:#7d8da0;font-weight:400}.user-info span{display:block;color:#7d8da0;font-size:10px}.role-form{display:flex;gap:6px;align-items:center}.role-form select{height:32px;font-size:10px;padding:0 6px;max-width:125px}.permission-note{margin-top:18px;background:#eaf5ff;border:1px solid #d5eaff;padding:18px 20px;border-radius:12px}.permission-note strong{color:#0757bb}.permission-note p{font-size:12px;color:#4b6077;margin:7px 0 0}.permission-note b{color:#233d5b}
@media(max-width:1000px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.topbar{gap:18px}.brand{min-width:auto}.topbar nav{gap:14px}.hero-art{width:42%}.hero-copy{width:62%}.user-layout{grid-template-columns:1fr}.user-layout>.editor-card:first-child{max-width:none}}@media(max-width:720px){.topbar{height:auto;min-height:70px;flex-wrap:wrap;padding:12px 18px;gap:10px}.brand{flex:1}.brand-logo{width:210px;height:52px}.topbar nav{order:3;flex-basis:100%;overflow:auto;padding:5px 0}.account{gap:7px}.role-pill{display:none}.page{padding:0 15px;margin-top:18px}.hero{min-height:340px;padding:28px 23px;align-items:flex-start}.hero-copy{width:100%}.hero h1{font-size:31px}.hero-art{top:auto;height:140px;width:100%;opacity:.45}.hero-art img{object-position:center 43%;mask-image:linear-gradient(180deg,transparent 0%,black 40%)}.hero-tags{gap:9px;font-size:10px}.stats{grid-template-columns:repeat(3,1fr);gap:8px}.stat{padding:13px}.stat strong{font-size:21px}.stat-action{grid-column:span 3}.catalog-head{display:block;margin-top:28px}.filters{margin-top:17px;flex-wrap:wrap}.searchbox{flex:1;min-width:180px}.filters select{flex:1;max-width:none}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-card{padding:12px}.product-card h3{font-size:13px}.price{font-size:14px}.admin-actions{gap:5px}.admin-actions .btn{font-size:10px;padding:6px 7px}.form-grid{grid-template-columns:1fr;gap:15px}.form-grid .span-2{grid-column:span 1}.editor-card{padding:18px}.user-row{flex-wrap:wrap}.user-info{min-width:calc(100% - 60px)}.role-form{margin-left:48px}.user-row>form:last-child{margin-left:auto}footer{padding:18px;gap:12px;flex-wrap:wrap}.footer-mark{width:100%}}@media(max-width:390px){.product-grid{grid-template-columns:1fr}.product-icon{height:75px}.product-intro{min-height:0}.filters .btn{padding:10px}.username{display:none}}

/* Product photos and image management */
.product-photo{height:190px;margin:14px 0;display:flex;align-items:center;justify-content:center;background:#f5f7fa;border-radius:14px;overflow:hidden}.product-photo img{width:100%;height:100%;object-fit:contain}.existing-images{margin-top:22px;padding-top:18px;border-top:1px solid #e5e9f0}.image-management{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}.managed-image{width:150px;display:flex;flex-direction:column;gap:7px;padding:10px;border:1px solid #e1e6ee;border-radius:12px}.managed-image img{width:100%;height:110px;object-fit:contain;background:#f5f7fa;border-radius:8px}.managed-image form{margin:0}.managed-image .btn{width:100%;white-space:normal}

/* Product detail modal: dialog on desktop/tablet, full-screen page on phones */
.product-detail-trigger{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;border-radius:10px}.product-detail-trigger:focus-visible{outline:3px solid #42a5f5;outline-offset:4px}.product-detail-trigger .product-photo{margin-top:14px}.product-detail-trigger h3{margin-bottom:0}.detail-hint{display:block;font-size:10px;color:#0875bf;font-weight:700;margin-top:8px}.product-card .product-bottom{margin-top:12px}.product-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:28px}.product-modal.is-open{display:flex}.product-modal-backdrop{position:absolute;inset:0;background:rgba(5,20,42,.68);backdrop-filter:blur(4px)}.product-modal-panel{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:min(960px,100%);max-height:min(86vh,850px);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 25px 90px #00142d55}.modal-close{position:absolute;right:12px;top:12px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:#eef4fa;color:#183753;font-size:27px;line-height:1;cursor:pointer}.modal-gallery{background:#f4f8fc;display:flex;align-content:flex-start;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:28px;min-height:320px}.modal-gallery img{display:block;max-width:100%;max-height:360px;width:auto;height:auto;object-fit:contain;border-radius:10px}.modal-gallery img:not(:first-child){width:calc(50% - 5px);max-height:130px;background:white}.modal-no-photo{color:#718198;text-align:center;padding:60px 15px}.modal-content{padding:36px 32px;overflow-wrap:anywhere}.modal-content h2{font-size:25px;line-height:1.25;margin:9px 35px 4px 0}.modal-price-stock{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #e8eef5;border-bottom:1px solid #e8eef5;padding:17px 0;margin:20px 0}.modal-price-stock>div:last-child{text-align:right}.modal-price-stock>div:last-child strong{font-size:17px}.modal-section{margin-top:20px}.modal-section h3{font-size:13px;margin:0 0 6px}.modal-section p{white-space:pre-line;color:#52657b;margin:0;line-height:1.75}#modal-intro{white-space:normal;overflow-wrap:anywhere}.modal-section[hidden]{display:none}body.modal-open{overflow:hidden}
@media(max-width:720px){.product-modal{padding:0;align-items:stretch}.product-modal-panel{display:block;width:100%;height:100%;max-height:100%;border-radius:0;overflow-y:auto}.modal-close{position:fixed;right:12px;top:12px;box-shadow:0 2px 10px #00142d20}.modal-gallery{min-height:250px;padding:54px 16px 18px}.modal-gallery img{max-height:38vh}.modal-gallery img:not(:first-child){max-height:95px}.modal-content{padding:24px 20px 40px}.modal-content h2{font-size:23px}.product-card{padding:11px}.detail-hint{font-size:9px}}

/* Collapsible theme drawer and color themes */
.theme-menu-toggle{position:fixed;left:16px;top:50%;bottom:auto;transform:translateY(-50%);z-index:40;display:flex;align-items:center;gap:9px;border:1px solid #cbdced;border-radius:999px;padding:12px 16px;background:#fff;color:#0757bb;box-shadow:0 8px 26px #092b5520;font-weight:800;cursor:pointer}.theme-menu-toggle span{font-size:12px}.theme-scrim{position:fixed;inset:0;z-index:49;background:rgba(7,20,38,.42);opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s}.theme-scrim.is-open{opacity:1;visibility:visible}.theme-drawer{position:fixed;left:0;top:0;bottom:0;z-index:50;width:min(340px,88vw);padding:24px 20px;background:#fff;color:#142338;box-shadow:18px 0 55px #00142d26;transform:translateX(-105%);visibility:hidden;transition:transform .24s ease,visibility .24s;overflow-y:auto}.theme-drawer.is-open{transform:translateX(0);visibility:visible}.theme-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:22px;border-bottom:1px solid #e1eaf3}.theme-drawer-head strong{display:block;font:800 17px Manrope,sans-serif}.theme-drawer-head small,.theme-option small{display:block;color:#78879a;font-size:11px;margin-top:4px}.theme-drawer-close{width:36px;height:36px;border:0;border-radius:10px;background:#eef4fa;color:#354b63;font-size:25px;line-height:1;cursor:pointer}.theme-group{padding-top:20px}.theme-group h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#8290a2;margin:0 0 10px}.theme-option{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:13px 10px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;cursor:pointer}.theme-option:hover{background:#f6f9fc}.theme-option.is-active{border-color:#a9d5fa;background:#eff8ff}.theme-option>span:nth-child(2){flex:1}.theme-option strong{font-size:12px}.theme-swatch{width:38px;height:38px;flex-shrink:0;border-radius:10px;border:1px solid #d9e1ea;background:linear-gradient(135deg,#0757bb 0 50%,#22b7ec 50%)}.swatch-dark{background:linear-gradient(135deg,#101820 0 50%,#34495e 50%);border-color:#34495e}.swatch-bw{background:linear-gradient(135deg,#111 0 50%,#fff 50%);border-color:#777}.theme-check{visibility:hidden;color:#0875bf;font-weight:900}.theme-option.is-active .theme-check{visibility:visible}.theme-drawer-note{margin-top:24px;padding:12px;border-radius:10px;background:#f5f8fc;color:#77869a;font-size:10px;line-height:1.6}
body[data-theme="dark"]{--blue:#6caeff;--blue2:#3488e8;--cyan:#67d4ff;--navy:#e8f1fc;--ink:#e8edf4;--muted:#aab7c7;--line:#303d4d;--bg:#111820;--white:#1a2430;--green:#50c69a;--red:#ff7c85;--shadow:0 12px 32px rgba(0,0,0,.24);color:var(--ink);background:var(--bg)}body[data-theme="dark"] .topbar,body[data-theme="dark"] footer,body[data-theme="dark"] .product-card,body[data-theme="dark"] .stat,body[data-theme="dark"] .searchbox,body[data-theme="dark"] .filters select,body[data-theme="dark"] .editor-card,body[data-theme="dark"] .auth-card,body[data-theme="dark"] .empty{background:#1a2430;color:var(--ink);border-color:var(--line)}body[data-theme="dark"] .topbar nav a,body[data-theme="dark"] .product-brand,body[data-theme="dark"] .product-intro,body[data-theme="dark"] .modal-section p{color:#b5c2d1}body[data-theme="dark"] .product-photo,body[data-theme="dark"] .product-icon,body[data-theme="dark"] .modal-gallery,body[data-theme="dark"] .photo-upload-section input[type=file]{background:#202d3b}body[data-theme="dark"] .product-icon svg{stroke:#6caeff}body[data-theme="dark"] .product-bottom,body[data-theme="dark"] .admin-actions,body[data-theme="dark"] .photo-upload-section,body[data-theme="dark"] .form-footer{border-color:#303d4d}body[data-theme="dark"] .form-grid input,body[data-theme="dark"] .form-grid select,body[data-theme="dark"] .form-grid textarea,body[data-theme="dark"] .form-stack input,body[data-theme="dark"] .form-stack select,body[data-theme="dark"] .form-stack textarea,body[data-theme="dark"] .price-input{background:#111820;color:#e8edf4;border-color:#3b4a5c}body[data-theme="dark"] .btn-outline{background:#202d3b;color:#9bcaff;border-color:#3b4a5c}body[data-theme="dark"] .btn-ghost{background:#2a3746;color:#d4dfeb}body[data-theme="dark"] .role-pill,body[data-theme="dark"] .count-pill{background:#233b55;color:#9bcaff}body[data-theme="dark"] .visibility-setting,body[data-theme="dark"] .permission-note{background:#202d3b;border-color:#35475b}body[data-theme="dark"] .modal-close{background:#2b3949;color:#eef5ff}body[data-theme="dark"] .product-modal-panel{background:#1a2430;color:#e8edf4}body[data-theme="dark"] .theme-menu-toggle{background:#1a2430;color:#9bcaff;border-color:#34495e}body[data-theme="dark"] .theme-drawer{background:#1a2430;color:#e8edf4}body[data-theme="dark"] .theme-drawer-head{border-color:#303d4d}body[data-theme="dark"] .theme-option:hover,body[data-theme="dark"] .theme-option.is-active{background:#233447;border-color:#42658a}body[data-theme="dark"] .theme-drawer-note{background:#202d3b;color:#aab7c7}body[data-theme="dark"] .auth-logo{background:#2b5d94}
body[data-theme="bw"]{--blue:#111;--blue2:#333;--cyan:#777;--navy:#111;--ink:#181818;--muted:#626262;--line:#d5d5d5;--bg:#f1f1f1;--white:#fff;--green:#333;--red:#333;--shadow:0 10px 25px rgba(0,0,0,.07);background:var(--bg);color:var(--ink)}body[data-theme="bw"] .topbar,body[data-theme="bw"] footer,body[data-theme="bw"] .product-card,body[data-theme="bw"] .stat,body[data-theme="bw"] .searchbox,body[data-theme="bw"] .filters select,body[data-theme="bw"] .editor-card,body[data-theme="bw"] .auth-card,body[data-theme="bw"] .empty{background:#fff;color:#181818;border-color:#d5d5d5}body[data-theme="bw"] .hero{background:linear-gradient(115deg,#111,#555)}body[data-theme="bw"] .hero .eyebrow,body[data-theme="bw"] .hero h1 span{color:#ddd}body[data-theme="bw"] .product-icon,body[data-theme="bw"] .product-photo,body[data-theme="bw"] .modal-gallery{background:#f0f0f0}body[data-theme="bw"] .product-icon svg{stroke:#222}body[data-theme="bw"] .category-chip,body[data-theme="bw"] .role-pill,body[data-theme="bw"] .count-pill{background:#eee;color:#222}body[data-theme="bw"] .btn-primary{background:#222;color:#fff;box-shadow:none}body[data-theme="bw"] .btn-outline{background:#fff;color:#222;border-color:#aaa}body[data-theme="bw"] .btn-ghost{background:#eee;color:#222}body[data-theme="bw"] .form-grid input,body[data-theme="bw"] .form-grid select,body[data-theme="bw"] .form-grid textarea,body[data-theme="bw"] .form-stack input,body[data-theme="bw"] .form-stack select,body[data-theme="bw"] .form-stack textarea{background:#fff;color:#181818;border-color:#ccc}body[data-theme="bw"] .visibility-setting,body[data-theme="bw"] .permission-note{background:#f4f4f4;border-color:#ddd}body[data-theme="bw"] .theme-menu-toggle{background:#fff;color:#111;border-color:#bbb}body[data-theme="bw"] .theme-option.is-active{background:#f0f0f0;border-color:#777}body[data-theme="bw"] .theme-drawer-note{background:#f1f1f1;color:#666}body[data-theme="bw"] .product-modal-panel{background:#fff;color:#181818}
@media(max-width:720px){.theme-menu-toggle{left:12px;top:50%;bottom:auto;transform:translateY(-50%);padding:11px 14px}.theme-drawer{padding:20px 16px}}

/* Label tombol pemilih tema */
.theme-menu-toggle .theme-menu-label {
  display: inline-block;
  line-height: 1.15;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}


/* E-commerce beta: stronger blue-theme contrast and live cart modal */
:root{--bg:#eaf2fc;--line:#d3e1f1;--shadow:0 12px 30px rgba(14,53,99,.10)}
body[data-theme="blue"]{background:linear-gradient(180deg,#e6f0fc 0%,#f1f6fd 420px,#eaf2fc 100%)}
body[data-theme="blue"] .page{background:transparent}
body[data-theme="blue"] .product-card,body[data-theme="blue"] .stat,body[data-theme="blue"] .empty,body[data-theme="blue"] .editor-card,body[data-theme="blue"] .auth-card{border-color:#d0deef;box-shadow:0 7px 22px rgba(13,58,112,.075)}
body[data-theme="blue"] .catalog-head{padding:0 2px}
.btn-cart{background:#e8f3ff;color:#064fa8;border-color:#bad8f8;box-shadow:0 4px 12px #0757bb14}
.cart-count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#0757bb;color:#fff;font-size:10px}
.add-cart-card{margin-top:12px;padding:10px 8px}
.add-cart-card:disabled,.modal-add-cart:disabled{opacity:.48;cursor:not-allowed;transform:none}
.product-card .product-bottom{margin-bottom:0}
.modal-add-cart{margin-bottom:6px}
.cart-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:24px}
.cart-modal.is-open{display:flex}
.cart-backdrop{position:absolute;inset:0;background:rgba(3,19,42,.66);backdrop-filter:blur(5px)}
.cart-panel{position:relative;z-index:1;display:flex;flex-direction:column;width:min(760px,100%);max-height:min(88vh,900px);background:#fff;color:#142338;border:1px solid #d9e5f2;border-radius:23px;box-shadow:0 28px 100px rgba(0,18,45,.32);overflow:hidden}
.cart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:25px 28px 20px;border-bottom:1px solid #e4edf6;background:linear-gradient(135deg,#f7fbff,#eaf4ff)}
.cart-head .eyebrow{color:#0875bf}.cart-head h2{font-size:23px;line-height:1.2;margin:5px 0 4px}.cart-head p{margin:0;color:#64758a;font-size:12px}
.cart-close{width:38px;height:38px;flex:0 0 38px;border:0;border-radius:12px;background:#dcecff;color:#17436f;font-size:27px;line-height:1;cursor:pointer}
.cart-items{overflow:auto;padding:6px 28px;min-height:0}
.cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid #e8eef5}
.cart-item-info{min-width:0;display:flex;flex-direction:column;gap:3px}.cart-item-info strong{font-size:13px;overflow-wrap:anywhere}.cart-item-info small{font-size:10px;color:#77869a}.cart-item-price{font-size:11px;color:#65768a}
.cart-controls{display:flex;align-items:center;gap:7px}.qty-btn{display:grid;place-items:center;width:30px;height:30px;border:1px solid #cbdced;border-radius:9px;background:#f4f8fd;color:#0757bb;font-weight:800;font-size:17px;cursor:pointer}.qty-btn:disabled{opacity:.35;cursor:not-allowed}.qty-value{min-width:18px;text-align:center;font-weight:800}.cart-remove{border:0;background:transparent;color:#bb3441;font-size:10px;font-weight:700;cursor:pointer;padding:5px}
.cart-subtotal{font-size:12px;white-space:nowrap;color:#0757bb;text-align:right}
.cart-empty{text-align:center;padding:45px 24px 50px}.cart-empty[hidden],.cart-summary[hidden],.cart-items[hidden]{display:none}.cart-empty-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border-radius:19px;background:#e8f3ff;font-size:24px}.cart-empty h3{margin:8px 0}.cart-empty p{font-size:12px;color:#68798e;margin:0 0 20px}
.cart-summary{padding:18px 28px 24px;background:#f8fbff;border-top:1px solid #e1ebf5}.cart-summary-line{display:flex;justify-content:space-between;align-items:center;gap:18px;color:#64758a;font-size:12px}.cart-total{margin-top:8px;color:#18344f;font-size:14px}.cart-total strong{font-size:23px;color:#0757bb}.cart-note{margin:10px 0 15px;color:#7a889a;font-size:10px;line-height:1.55}.cart-summary .btn{font-size:12px}
body.cart-open{overflow:hidden}
body[data-theme="dark"] .cart-panel{background:#1a2430;color:#e8edf4;border-color:#303d4d}body[data-theme="dark"] .cart-head,body[data-theme="dark"] .cart-summary{background:#202d3b;border-color:#303d4d}body[data-theme="dark"] .cart-head p,body[data-theme="dark"] .cart-item-price,body[data-theme="dark"] .cart-item-info small,body[data-theme="dark"] .cart-summary-line{color:#aab7c7}body[data-theme="dark"] .cart-item{border-color:#303d4d}body[data-theme="dark"] .cart-close,body[data-theme="dark"] .qty-btn{background:#2b3949;color:#9bcaff;border-color:#3b4a5c}body[data-theme="dark"] .cart-subtotal,body[data-theme="dark"] .cart-total strong{color:#9bcaff}body[data-theme="dark"] .cart-note{color:#aab7c7}
body[data-theme="bw"] .cart-panel{background:#fff;color:#181818}body[data-theme="bw"] .cart-head,body[data-theme="bw"] .cart-summary{background:#f3f3f3}body[data-theme="bw"] .btn-cart,body[data-theme="bw"] .cart-count{background:#222;color:#fff;border-color:#222}body[data-theme="bw"] .cart-subtotal,body[data-theme="bw"] .cart-total strong{color:#222}
@media(max-width:720px){.cart-modal{padding:0;align-items:stretch}.cart-panel{width:100%;height:100%;max-height:100%;border-radius:0;border:0}.cart-head{padding:20px 18px 16px}.cart-head h2{font-size:21px}.cart-items{padding:4px 18px}.cart-item{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:15px 0}.cart-controls{grid-column:1 / 2;grid-row:2;justify-content:flex-start}.cart-subtotal{grid-column:2;grid-row:1 / span 2;align-self:center}.cart-summary{padding:16px 18px 22px}.account{flex-wrap:wrap}.btn-cart{padding:7px 9px}}

/* Preserve original line breaks and paragraphs from imported Excel text in product details. */
#modal-intro, #modal-description { white-space: pre-wrap; overflow-wrap: anywhere; }


/* Dark Theme: cyberpunk high-tech, high contrast */
body[data-theme="dark"]{--blue:#00c8ff;--blue2:#087cff;--cyan:#20f0ff;--navy:#f2f8ff;--ink:#eaf5ff;--muted:#a7bdd5;--line:#164c75;--bg:#030812;--white:#081526;--green:#54ffd1;--red:#ff4e83;--shadow:0 12px 34px rgba(0,0,0,.48);background:radial-gradient(ellipse at 80% 0%,#092b54 0%,transparent 38%),linear-gradient(180deg,#030812,#06111f 55%,#02060c);color:var(--ink)}
body[data-theme="dark"] .topbar,body[data-theme="dark"] footer,body[data-theme="dark"] .product-card,body[data-theme="dark"] .stat,body[data-theme="dark"] .searchbox,body[data-theme="dark"] .filters select,body[data-theme="dark"] .editor-card,body[data-theme="dark"] .auth-card,body[data-theme="dark"] .empty{background:linear-gradient(145deg,#091a2e,#06101d);color:#eaf5ff;border-color:#12608b;box-shadow:0 0 0 1px #00bfff0d,0 8px 28px #0008}
body[data-theme="dark"] .topbar{border-bottom:1px solid #00bfff88;box-shadow:0 4px 24px #007dff22}
body[data-theme="dark"] .topbar nav a:hover,body[data-theme="dark"] .topbar nav a.active{color:#20f0ff;text-shadow:0 0 12px #00bfff}
body[data-theme="dark"] .btn-primary{background:linear-gradient(100deg,#006dff,#00b8e8);color:#fff;border:1px solid #42e5ff;box-shadow:0 0 16px #007dff55}
body[data-theme="dark"] .btn-outline{background:#071a2d;color:#6eeaff;border-color:#1686ba}
body[data-theme="dark"] .product-card{position:relative;overflow:hidden}
body[data-theme="dark"] .product-card:hover{border-color:#00d9ff;box-shadow:0 0 0 1px #00d9ff66,0 0 24px #007dff38;transform:translateY(-3px)}
body[data-theme="dark"] .product-photo,body[data-theme="dark"] .product-icon,body[data-theme="dark"] .modal-gallery{background:linear-gradient(145deg,#0a2138,#050c16);border-color:#164c75}
body[data-theme="dark"] .hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(100deg,#020712f2 0%,#031426d9 48%,#03101bd9 100%);border:1px solid #087dbb;box-shadow:inset 0 0 45px #007dff18,0 12px 35px #0005}
body[data-theme="dark"] .hero-video-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;opacity:.42}
body[data-theme="dark"] .hero-video-bg iframe{position:absolute;top:50%;left:50%;width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%);filter:saturate(1.25) contrast(1.12)}
body[data-theme="dark"] .hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#020711f2 0%,#041426d9 43%,#06101d70 100%),repeating-linear-gradient(0deg,transparent 0 42px,#00c8ff0a 43px 44px);border:1px solid #00c8ff55}
body[data-theme="dark"] .hero h1 span,body[data-theme="dark"] .hero .eyebrow{color:#20e7ff;text-shadow:0 0 15px #00aaff66}
body[data-theme="dark"] .hero-glow{background:radial-gradient(ellipse,#007dff2e,transparent 68%)}
body[data-theme="dark"] .theme-menu-toggle{background:#071626;color:#42eaff;border-color:#1686ba;box-shadow:0 0 18px #007dff33}
body[data-theme="dark"] .theme-swatch.swatch-dark{background:linear-gradient(135deg,#030812 0 45%,#00c8ff 45% 55%,#ff3d81 55%);border-color:#1686ba}
body[data-theme="dark"] .category-chip,body[data-theme="dark"] .role-pill,body[data-theme="dark"] .count-pill{background:#082b45;color:#6eeaff;border:1px solid #145b7e}
body[data-theme="dark"] .form-grid input,body[data-theme="dark"] .form-grid select,body[data-theme="dark"] .form-grid textarea,body[data-theme="dark"] .form-stack input,body[data-theme="dark"] .form-stack select,body[data-theme="dark"] .form-stack textarea,body[data-theme="dark"] .price-input{background:#030c17;color:#effaff;border-color:#155577}
body[data-theme="dark"] .hero-copy,body[data-theme="dark"] .hero-copy p{color:#eaf5ff}
@media(prefers-reduced-motion:reduce){body[data-theme="dark"] .hero-video-bg{display:none}}
@media(max-width:720px){body[data-theme="dark"] .hero-video-bg{opacity:.22}body[data-theme="dark"] .hero-video-bg iframe{display:none}}

/* Deltakom Mandiri + Motorola Solutions: keep both supplied logos unchanged. */
.brand{gap:13px;min-width:300px;flex-shrink:0}.brand-logo{height:auto;object-fit:contain;object-position:center;flex-shrink:0}.brand-logo-deltakom{width:174px;max-height:54px}.brand-logo-motorola{width:62px;max-height:58px}.brand-divider{display:block;width:1px;height:38px;background:#cbd7e5;flex-shrink:0}.brand-logo-deltakom{mix-blend-mode:normal}
/* The YouTube video is hidden in Blue/BW themes and appears only in Dark Theme. */
.hero-video-bg{display:none}
body[data-theme="dark"] .hero-video-bg{display:block}
@media(max-width:1000px){.brand{min-width:260px;gap:9px}.brand-logo-deltakom{width:150px}.brand-logo-motorola{width:52px}}
@media(max-width:720px){.brand{min-width:0;gap:7px;flex:0 1 auto}.brand-logo-deltakom{width:clamp(112px,35vw,150px);max-height:43px}.brand-logo-motorola{width:42px;max-height:43px}.brand-divider{height:29px}.hero-video-bg{display:none!important}body[data-theme="dark"] .hero-video-bg{display:block!important}}


/* Dark Theme refinement: YouTube video fills the site background, not the hero banner. */
.site-video-bg{display:none}
body[data-theme="dark"] .site-video-bg{display:block;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.30;background:#020711}
body[data-theme="dark"] .site-video-bg iframe{position:absolute;top:50%;left:50%;width:177.78vh;height:56.25vw;min-width:100vw;min-height:100vh;transform:translate(-50%,-50%);border:0;filter:saturate(1.2) contrast(1.12)}
body[data-theme="dark"]{position:relative;isolation:isolate;background:transparent!important}
body[data-theme="dark"] .topbar,body[data-theme="dark"] footer,body[data-theme="dark"] .product-card,body[data-theme="dark"] .stat,body[data-theme="dark"] .searchbox,body[data-theme="dark"] .filters select,body[data-theme="dark"] .editor-card,body[data-theme="dark"] .auth-card,body[data-theme="dark"] .empty{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:linear-gradient(145deg,rgba(5,20,38,.88),rgba(3,12,25,.88))}
body[data-theme="dark"] .hero{background:linear-gradient(100deg,rgba(2,7,18,.82),rgba(3,20,38,.72))}
body[data-theme="dark"] .hero-video-bg{display:none!important}
body[data-theme="dark"] .brand{padding:8px 14px;border:1px solid rgba(0,200,255,.45);border-radius:13px;background:rgba(245,250,255,.96);box-shadow:0 0 22px rgba(0,190,255,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body[data-theme="dark"] .brand-divider{background:rgba(18,45,70,.38)}
@media(max-width:720px){body[data-theme="dark"] .site-video-bg{opacity:.20}body[data-theme="dark"] .site-video-bg iframe{display:block}body[data-theme="dark"] .hero-video-bg{display:none!important}}
@media(prefers-reduced-motion:reduce){body[data-theme="dark"] .site-video-bg{display:none}}

/* FIX: keep the full-page YouTube background above the transparent body canvas and behind app UI. */
body[data-theme="dark"]{background:#020711!important;isolation:isolate}
body[data-theme="dark"] .site-video-bg{display:block!important;position:fixed!important;inset:0!important;z-index:-1!important;overflow:hidden;pointer-events:none;opacity:.42;background:#020711}
body[data-theme="dark"] .site-video-bg iframe{display:block!important;position:absolute;top:50%;left:50%;width:177.78vh;height:56.25vw;min-width:100vw;min-height:100vh;transform:translate(-50%,-50%);border:0;filter:saturate(1.2) contrast(1.12)}
@media(max-width:720px){body[data-theme="dark"] .site-video-bg{opacity:.24}body[data-theme="dark"] .site-video-bg iframe{display:block!important}}

/* Unified administrator navigation */
.admin-nav{position:relative}.admin-nav-toggle{border:1px solid #c9ddf3;background:#edf6ff;color:#0757bb;border-radius:10px;padding:9px 12px;font-weight:800;font-size:12px;white-space:nowrap;cursor:pointer}.admin-nav-menu{display:none;position:absolute;top:calc(100% + 12px);left:0;min-width:235px;padding:8px;background:#fff;border:1px solid #dbe7f4;border-radius:14px;box-shadow:0 18px 48px #092b5526;z-index:90}.admin-nav-menu.is-open{display:block}.admin-nav-menu a{display:block!important;padding:11px 12px;border-radius:9px;font-size:12px!important;color:#263f5c!important;white-space:nowrap}.admin-nav-menu a:hover{background:#eef6ff;color:#0757bb!important}body[data-theme="dark"] .admin-nav-toggle{background:#071a2d;color:#66eaff;border-color:#1686ba}body[data-theme="dark"] .admin-nav-menu{background:#101d2b;border-color:#254762}body[data-theme="dark"] .admin-nav-menu a{color:#e4f2ff!important}body[data-theme="dark"] .admin-nav-menu a:hover{background:#18334b;color:#61eaff!important}body[data-theme="bw"] .admin-nav-toggle{background:#eee;color:#111;border-color:#aaa}body[data-theme="bw"] .admin-nav-menu{background:#fff;border-color:#ccc}body[data-theme="bw"] .admin-nav-menu a{color:#111!important}body[data-theme="bw"] .admin-nav-menu a:hover{background:#eee}
/* About page */
.about-hero{display:grid;grid-template-columns:1.4fr .6fr;align-items:center;gap:30px;padding:clamp(28px,5vw,60px);border-radius:26px;background:linear-gradient(120deg,#062e69,#0878c8 68%,#21b8df);color:#fff;box-shadow:0 20px 48px #0757bb20;overflow:hidden}.about-hero h1{font-size:clamp(30px,4.5vw,52px);line-height:1.08;letter-spacing:-1.3px;margin:12px 0}.about-hero h1 span{color:#a9efff}.about-hero p{max-width:670px;color:#e1f1ff;font-size:15px}.about-tags,.project-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.about-tags span,.project-chips span{border:1px solid #ffffff40;background:#ffffff12;border-radius:999px;padding:8px 13px;font-size:11px;font-weight:700}.about-mark{background:#ffffffed;border-radius:24px;padding:20px;display:grid;place-items:center;min-height:180px}.about-mark img{width:100%;max-width:300px;height:auto;object-fit:contain}.about-section{margin-top:44px}.about-section-heading{max-width:760px;margin-bottom:20px}.about-section-heading h2,.about-contact h2{font-size:clamp(23px,3vw,32px);line-height:1.2;margin:8px 0}.about-section-heading p{color:var(--muted)}.about-intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.about-card,.service-grid article{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:23px;box-shadow:var(--shadow)}.about-icon{display:grid;place-items:center;width:42px;height:42px;background:#e8f4ff;color:#0757bb;border-radius:13px;font-size:22px;font-weight:900}.about-card h3,.service-grid h3{margin:14px 0 7px}.about-card p,.service-grid p{color:var(--muted);margin:0;font-size:13px}.about-purpose{display:grid;grid-template-columns:1fr 1fr;gap:30px;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px}.about-purpose h2{font-size:23px;line-height:1.35}.about-purpose ul{padding-left:20px;color:var(--muted)}.about-purpose li{margin:8px 0}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-grid article>b{color:var(--blue);font-size:12px;letter-spacing:1px}.project-chips span{background:var(--white);border-color:var(--line);color:var(--ink)}.about-contact{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:44px;padding:30px;border-radius:22px;background:#082e61;color:#fff}.about-contact>div:first-child{max-width:700px}.about-contact p{color:#d0e2f7}.contact-panel{min-width:225px;background:#ffffff12;border:1px solid #ffffff35;border-radius:16px;padding:20px}.contact-panel p{margin:8px 0}.contact-panel a{font-weight:800;color:#9feaff}body[data-theme="dark"] .about-card,body[data-theme="dark"] .service-grid article,body[data-theme="dark"] .about-purpose{background:#101d2b;border-color:#254762}body[data-theme="dark"] .about-icon{background:#15344e;color:#70eaff}body[data-theme="bw"] .about-card,body[data-theme="bw"] .service-grid article,body[data-theme="bw"] .about-purpose{background:#fff;border-color:#ccc}body[data-theme="bw"] .about-icon{background:#eee;color:#111}body[data-theme="bw"] .project-chips span{background:#fff;border-color:#ccc}body[data-theme="dark"] .project-chips span{background:#101d2b;border-color:#254762}
/* Stock operations */
.stock-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.stock-kpis article{background:var(--white);border:1px solid var(--line);border-radius:15px;padding:18px;display:flex;flex-direction:column;gap:5px}.stock-kpis span{color:var(--muted);font-size:11px}.stock-kpis strong{font-size:28px}.stock-kpi-warning{border-color:#f3d28b!important}.stock-kpi-empty{border-color:#f0b8bd!important}.stock-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:18px;margin-bottom:20px}.stock-section-title h2{margin:5px 0;font-size:21px}.stock-section-title p{margin:0 0 17px;font-size:12px}.stock-form{display:grid;gap:14px}.form-stack label{display:grid;gap:7px;font-weight:700;font-size:12px}.form-stack input,.form-stack select,.form-stack textarea,.stock-filter input,.stock-filter select{width:100%;border:1px solid #cddbec;border-radius:10px;padding:11px 12px;background:#fff;color:#172a40}.form-stack small{font-size:10px;color:var(--muted);font-weight:400}.stock-filter{display:flex;gap:8px;margin-bottom:13px}.stock-filter input{min-width:0;flex:1}.stock-filter select{width:auto;max-width:155px}.stock-table-wrap{width:100%;overflow:auto}.stock-table{width:100%;border-collapse:collapse;font-size:12px}.stock-table th,.stock-table td{text-align:left;padding:11px 9px;border-bottom:1px solid var(--line);vertical-align:top}.stock-table th{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.stock-table td strong,.stock-table td small{display:block}.stock-table td small{font-size:10px;color:var(--muted);margin-top:3px}.stock-number{font-weight:900;font-size:17px}.stock-status{display:inline-block;border-radius:99px;padding:4px 8px;font-size:10px;font-weight:800}.status-empty{background:#ffe8e9;color:#b4232e}.status-low{background:#fff3d7;color:#8a5700}.status-ok{background:#dff8eb;color:#126b49}.stock-history{margin-top:20px}.stock-history .stock-table{min-width:760px}body[data-theme="dark"] .stock-kpis article,body[data-theme="dark"] .stock-table-wrap,body[data-theme="dark"] .form-stack input,body[data-theme="dark"] .form-stack select,body[data-theme="dark"] .form-stack textarea,body[data-theme="dark"] .stock-filter input,body[data-theme="dark"] .stock-filter select{background:#101d2b;color:#e8f4ff;border-color:#254762}body[data-theme="dark"] .stock-table td,body[data-theme="dark"] .stock-table th{border-color:#254762}body[data-theme="bw"] .stock-kpis article,body[data-theme="bw"] .form-stack input,body[data-theme="bw"] .form-stack select,body[data-theme="bw"] .form-stack textarea,body[data-theme="bw"] .stock-filter input,body[data-theme="bw"] .stock-filter select{background:#fff;color:#111;border-color:#ccc}
@media(max-width:900px){.topbar{gap:14px;padding:0 16px}.topbar nav{gap:12px}.brand{min-width:160px}.brand-logo{width:170px}.account{gap:6px}.about-hero{grid-template-columns:1fr}.about-mark{min-height:100px}.about-mark img{max-width:230px}.stock-layout{grid-template-columns:1fr}.stock-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.about-intro-grid,.service-grid{grid-template-columns:1fr}.about-purpose{grid-template-columns:1fr;padding:20px}.about-contact{align-items:stretch;flex-direction:column;padding:22px}.contact-panel{min-width:0}.topbar{height:auto;min-height:72px;flex-wrap:wrap;padding:10px 12px}.topbar nav{order:3;width:100%;flex:1 0 100%;padding:6px 0}.account{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}.brand-logo{height:42px;width:130px}.admin-nav-menu{left:auto;right:0}.stock-filter{flex-wrap:wrap}.stock-filter input,.stock-filter select{width:100%;max-width:none}.stock-kpis strong{font-size:23px}}


/* About Us: gallery using photographs from the supplied company profile. */
.about-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.about-gallery figure{margin:0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--white);box-shadow:var(--shadow)}
.about-gallery figure img{display:block;width:100%;height:190px;object-fit:cover;background:#e9eef4}
.about-gallery figcaption{display:flex;flex-direction:column;gap:5px;padding:14px 16px}
.about-gallery figcaption strong{font-size:14px;color:var(--ink)}
.about-gallery figcaption span{font-size:12px;line-height:1.5;color:var(--muted)}
.about-gallery .about-gallery-feature{grid-column:span 2}
.about-gallery .about-gallery-feature img{height:260px}
.about-visuals .about-section-heading{margin-bottom:22px}
@media(max-width:800px){.about-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.about-gallery .about-gallery-feature{grid-column:span 2}.about-gallery figure img{height:165px}.about-gallery .about-gallery-feature img{height:220px}}
@media(max-width:480px){.about-gallery{grid-template-columns:1fr}.about-gallery .about-gallery-feature{grid-column:span 1}.about-gallery figure img,.about-gallery .about-gallery-feature img{height:210px}}


/* Commerce POS responsive product-grid */
.pos-shell{max-width:1500px;margin:0 auto}.pos-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:10px 0 22px}.pos-heading h1{margin:5px 0;font-size:clamp(1.6rem,3vw,2.25rem)}.pos-heading p{margin:0;color:var(--muted,#667085)}.pos-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,330px);gap:18px;align-items:start}.pos-products{min-width:0;padding:18px}.pos-tools{display:flex;gap:14px;align-items:end;justify-content:space-between;margin-bottom:16px}.pos-search{flex:1;max-width:560px}.pos-search input{margin-top:6px}.pos-result-count{font-size:.88rem;color:var(--muted,#667085);padding-bottom:10px;white-space:nowrap}.pos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pos-product{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--border,#e5e7eb);border-radius:14px;background:var(--card,#fff);transition:box-shadow .18s,border-color .18s}.pos-product:hover{box-shadow:0 8px 24px #102a4312;border-color:var(--accent,#4b76b8)}.pos-product[hidden]{display:none}.pos-product-photo{height:150px;background:var(--surface,#f6f8fb);display:flex;align-items:center;justify-content:center;padding:10px}.pos-product-photo img{width:100%;height:100%;object-fit:contain}.pos-no-photo{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted,#7b8494)}.pos-no-photo span{font-size:2.5rem}.pos-no-photo small{font-size:.76rem}.pos-product-info{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:12px 12px 8px;flex:1}.pos-code{color:var(--muted,#667085);font-size:.75rem}.pos-product-info h3{font-size:.95rem;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.55em}.pos-product-info p{margin:0;color:var(--muted,#667085);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.pos-price{color:var(--accent,#285ba7);font-size:1.02rem;margin-top:4px}.pos-stock{font-size:.75rem;color:#23865a}.pos-stock.is-empty{color:#c33}.pos-product-action{display:flex;align-items:end;gap:8px;padding:10px 12px 12px;margin-top:auto}.pos-product-action label{font-size:.76rem;color:var(--muted,#667085);flex:1;min-width:0}.pos-product-action input{width:100%;min-width:0;margin-top:4px;padding:8px}.pos-add{padding:8px 10px;white-space:nowrap}.pos-checkout{position:sticky;top:14px;padding:18px;display:flex;flex-direction:column;gap:14px}.pos-checkout-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.pos-checkout-title h2{margin:4px 0 0;font-size:1.25rem}.pos-live-dot{font-size:.78rem;color:#23865a;white-space:nowrap}.pos-checkout label{display:block}.pos-checkout label input,.pos-checkout label select{margin-top:5px}.pos-summary{border-top:1px dashed var(--border,#ddd);padding-top:12px;display:grid;gap:10px}.pos-summary>div:not(.pos-summary-note){display:flex;justify-content:space-between;gap:10px}.pos-summary-note,.pos-stock-note{font-size:.78rem;line-height:1.5;color:var(--muted,#667085);margin:0}.pos-submit{display:flex;align-items:center;justify-content:space-between}.pos-submit:disabled{opacity:.55;cursor:not-allowed}.pos-no-results{padding:28px;text-align:center;color:var(--muted,#667085)}.admin-drawer-group{border-top:1px solid var(--border,#e5e7eb);padding-top:14px;margin-top:12px}.admin-drawer-group h3{margin-bottom:8px}.admin-drawer-link{display:block;text-decoration:none;padding:10px 12px;border-radius:9px;color:var(--text,inherit);font-weight:600}.admin-drawer-link:hover{background:var(--surface,#f2f5f9)}
@media(max-width:1050px){.pos-layout{grid-template-columns:minmax(0,1fr) 285px}.pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-product-photo{height:140px}}
@media(max-width:760px){.pos-heading{align-items:flex-start;flex-direction:column}.pos-layout{grid-template-columns:1fr}.pos-checkout{position:static;order:-1}.pos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pos-products{padding:12px}.pos-product-photo{height:125px}.pos-tools{align-items:stretch;flex-direction:column;gap:8px}.pos-result-count{padding:0}}
@media(max-width:420px){.pos-grid{grid-template-columns:1fr 1fr;gap:8px}.pos-product-photo{height:105px;padding:7px}.pos-product-info{padding:9px 9px 6px}.pos-product-info h3{font-size:.85rem}.pos-product-action{padding:8px;gap:5px}.pos-add{font-size:.78rem;padding:7px}.pos-product-action input{padding:7px}.pos-checkout{padding:14px}}

/* v22 polish: account settings modal with blurred backdrop */


/* Keep lightweight iframe layouts used by existing product dialogs. Account settings no longer uses an iframe. */
body.embedded-account .topbar,body.embedded-account .theme-menu-toggle,body.embedded-account .theme-scrim,body.embedded-account .theme-drawer,body.embedded-account footer,body.embedded-account .site-video-bg{display:none!important}body.embedded-account .page{margin:0 auto;padding:14px;max-width:100%;}body.embedded-account .users-heading h1{font-size:20px}body.embedded-account .user-layout{grid-template-columns:1fr;gap:12px}body.embedded-account .editor-card{padding:16px}body.embedded-account .flash-list{margin:0 14px}
/* POS checkout form spacing and discount controls */
.pos-form-fields{display:grid;grid-template-columns:1fr;gap:14px;text-align:left;align-items:start}
.pos-form-fields>label{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;text-align:left;line-height:1.4}
.pos-form-fields>label input,.pos-form-fields>label select{display:block;width:100%;box-sizing:border-box;margin:0;text-align:left;min-height:42px}
.pos-discount-preview{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:11px 12px;border:1px solid var(--border,#e5e7eb);border-radius:10px;background:var(--surface,#f6f8fb);text-align:left}
.pos-discount-preview strong{color:var(--accent,#285ba7);font-size:1.05rem}
.pos-discount-preview small{color:var(--muted,#667085);font-size:.75rem;line-height:1.45}
.pos-summary-total{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--border,#e5e7eb);font-weight:700}
.pos-summary-total strong{font-size:1.12rem;color:var(--accent,#285ba7)}


/* Bukti transaksi POS: dialog pop-up dan jarak tombol yang lega */
.receipt-modal{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)}
.receipt-modal-backdrop{position:absolute;inset:0;background:rgba(5,18,35,.66);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.receipt-modal-panel{position:relative;z-index:1;width:min(900px,100%);max-height:min(88vh,900px);overflow:auto;background:var(--white,#fff);color:var(--ink,#142338);border:1px solid var(--line,#e1eaf3);border-radius:20px;padding:clamp(20px,3vw,34px);box-shadow:0 28px 90px rgba(0,15,40,.34)}
.receipt-modal-close{position:absolute;right:16px;top:14px;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#edf3f9;color:#243b54;font-size:27px;line-height:1}
.receipt-heading{padding-right:42px;margin-bottom:20px}.receipt-heading h1{margin:5px 0 0;font-size:25px}.receipt-heading h2{margin:0;font-size:19px}
.receipt-modal-panel>p{margin:8px 0}.receipt-total{margin:20px 0}
.receipt-actions{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line,#e1eaf3)}
.receipt-actions .btn{min-height:42px;padding:11px 19px}
body:has(.receipt-modal){overflow:hidden}
@media(max-width:640px){.receipt-modal{padding:0;align-items:stretch}.receipt-modal-panel{width:100%;height:100%;max-height:100%;border-radius:0;padding:68px 16px 24px}.receipt-modal-close{right:14px;top:14px}.receipt-actions{display:grid;grid-template-columns:1fr;gap:12px}.receipt-actions .btn{width:100%;white-space:normal}.receipt-modal-panel .table-wrap{overflow-x:auto}}
@media print{.receipt-modal{position:static;display:block;padding:0}.receipt-modal-backdrop,.receipt-modal-close{display:none!important}.receipt-modal-panel{width:100%;max-height:none;overflow:visible;border:0;box-shadow:none;padding:0}.receipt-actions{display:none!important}body:has(.receipt-modal){overflow:visible}}

/* Struk POS: bersihkan tampilan cetak dari header/navigasi situs */
@media print {
  @page { margin: 10mm; }
  body { background:#fff !important; color:#111 !important; }
  body > header, body > nav, body > footer, .site-header, .navbar, .main-header, .topbar, .sidebar, .flash, .alert, .site-footer { display:none !important; }
  .receipt-modal { position:static !important; display:block !important; padding:0 !important; background:transparent !important; }
  .receipt-modal-panel, .receipt { width:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:#fff !important; color:#111 !important; }
  .receipt-modal-backdrop, .receipt-modal-close, .receipt-actions { display:none !important; }
  .receipt table { width:100% !important; border-collapse:collapse !important; }
  .receipt th, .receipt td { border:1px solid #aaa !important; color:#111 !important; }
}

/* Revisi cetak: sembunyikan tombol Open Feature dan label status transaksi */
@media print {
  .theme-menu-toggle, #themeMenuToggle, .theme-scrim, .theme-drawer,
  .receipt-heading .eyebrow { display:none !important; }
  .receipt-heading { padding-right:0 !important; }
}


/* FIX4: print overrides also present in receipt template to avoid stale/shared stylesheet issues */
@media print {
  #themeMenuToggle, .theme-menu-toggle, #themeScrim, .theme-scrim, #themeDrawer, .theme-drawer { display:none !important; }
  .receipt-heading .eyebrow, .receipt-heading > .eyebrow { display:none !important; visibility:hidden !important; }
}

/* Manajemen stok: responsif, cetak per bagian, dan popup bukti transaksi lebih ringkas */
.receipt-modal-panel{width:min(680px,calc(100vw - 32px))}
@media(max-width:640px){.receipt-modal-panel{width:100%;padding:64px 14px 20px}.receipt-modal{padding:0}}
.stock-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.stock-date-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:14px 0}
.stock-date-filter label{display:grid;gap:5px;font-weight:600;min-width:150px}
.stock-date-filter input{max-width:100%;padding:10px;border:1px solid var(--line,#d6e0ea);border-radius:9px}
.stock-pagination{display:flex;gap:14px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
@media(max-width:640px){.stock-actions>*{flex:1 1 100%;text-align:center}.stock-date-filter label{width:100%}.stock-date-filter label input{width:100%;box-sizing:border-box}.stock-pagination{justify-content:center}}
@media print{
  body[data-print-target] *{visibility:hidden!important}
  body[data-print-target="stockListPrint"] #stockListPrint,body[data-print-target="stockHistoryPrint"] #stockHistoryPrint{visibility:visible!important;display:block!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:#fff!important;color:#111!important}
  body[data-print-target] #stockListPrint *,body[data-print-target] #stockHistoryPrint *{visibility:visible!important}
  body[data-print-target] #stockListPrint .no-print,body[data-print-target] #stockHistoryPrint .no-print{display:none!important}
  body[data-print-target] .stock-table-wrap{overflow:visible!important}
  body[data-print-target] .stock-table{width:100%!important;border-collapse:collapse!important}
  body[data-print-target] .stock-table th,body[data-print-target] .stock-table td{border:1px solid #aaa!important;color:#111!important}
  body[data-print-target] .stock-table small{display:block!important}
  body[data-print-target] .stock-kpis,body[data-print-target] .form-heading{display:none!important}
  /* Cetak Daftar Stok: pertahankan parent .stock-layout agar bagian daftar stok tidak ikut tersembunyi. */
  body[data-print-target="stockListPrint"] .stock-layout{display:block!important;visibility:visible!important}
  body[data-print-target="stockListPrint"] .stock-layout > .editor-card:not(#stockListPrint){display:none!important}
  body[data-print-target="stockHistoryPrint"] .stock-layout{display:none!important}
}


/* Stock management wider layout */
.form-page.stock-page{max-width:none;width:100%;}
.stock-page .stock-layout{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);}
@media(max-width:900px){.form-page.stock-page{width:100%;}.stock-page .stock-layout{grid-template-columns:minmax(0,1fr);}}


/* FIX: Saat cetak Daftar Stok, jangan ikut mencetak Riwayat Stok. */
@media print {
  body[data-print-target="stockListPrint"] #stockHistoryPrint {
    display: none !important;
    visibility: hidden !important;
  }
  body[data-print-target="stockListPrint"] #stockListPrint {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    page-break-before: avoid !important;
    break-before: avoid-page !important;
  }
  body[data-print-target="stockListPrint"] #stockListPrint * {
    visibility: visible !important;
  }
}


/* V132: Katalog product-detail modal — anchor to viewport and keep every section usable on short screens. */
.product-modal {
  padding: clamp(10px, 2.2vw, 28px);
  overscroll-behavior: contain;
}
.product-modal-panel {
  width: min(1040px, 100%);
  height: min(86vh, 850px);
  height: min(86dvh, 850px);
  max-height: calc(100dvh - 20px);
  min-height: 0;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.product-modal-panel > .modal-gallery,
.product-modal-panel > .modal-content {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.product-modal-panel > .modal-gallery {
  align-content: start;
  padding: clamp(14px, 2vw, 28px);
}
.product-modal-panel .modal-gallery img {
  max-height: min(42dvh, 360px);
}
.product-modal-panel > .modal-content {
  padding: clamp(17px, 2.5vw, 32px);
  padding-top: clamp(24px, 3vw, 36px);
}
@media (max-height: 680px) and (min-width: 761px) {
  .product-modal-panel {
    height: 92dvh;
    max-height: calc(100dvh - 12px);
  }
  .product-modal-panel > .modal-gallery { padding: 12px; }
  .product-modal-panel > .modal-content { padding: 16px 20px; }
  .product-modal-panel .modal-gallery img { max-height: 34dvh; }
  .product-modal-panel .modal-content h2 { font-size: 21px; }
  .product-modal-panel .modal-price-stock { margin: 12px 0; padding: 10px 0; }
  .product-modal-panel .modal-section { margin-top: 13px; }
}
@media (max-width: 760px) {
  .product-modal { padding: 8px; }
  .product-modal-panel {
    width: min(620px, 100%);
    height: min(92dvh, 850px);
    max-height: calc(100dvh - 16px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(130px, 31dvh) minmax(0, 1fr);
    border-radius: 16px;
  }
  .product-modal-panel > .modal-gallery {
    min-height: 0;
    padding: 10px 14px;
    gap: 8px;
  }
  .product-modal-panel .modal-gallery img {
    max-height: 27dvh;
  }
  .product-modal-panel > .modal-content {
    padding: 14px 18px 20px;
  }
  .product-modal-panel .modal-content h2 {
    font-size: clamp(19px, 5vw, 24px);
    margin-top: 6px;
  }
  .product-modal-panel .modal-price-stock {
    margin: 12px 0;
    padding: 10px 0;
  }
  .product-modal-panel .modal-section { margin-top: 14px; }
  .product-modal-panel .modal-close { right: 8px; top: 8px; }
}
@media (max-width: 380px) {
  .product-modal-panel > .modal-content { padding: 12px 14px 18px; }
  .product-modal-panel .modal-price-stock { gap: 10px; }
  .product-modal-panel .modal-price-stock .price { font-size: 14px; }
}