/* Shared visual system. Page-specific layout and application behavior are retained. */
:root{--ink:#19242e;--muted:#65727e;--paper:#f4f5f7;--line:#e2e7eb;--accent:#bd4b13;--accent-hover:#983a0d;--radius:16px;--shadow:0 8px 28px #1b283b08}
body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
button:disabled{cursor:wait;opacity:.65}
:focus-visible{outline:3px solid #bd4b1370;outline-offset:3px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #bd4b1314}
header,.navbar{border-bottom:1px solid var(--line);box-shadow:0 3px 18px #16253506}
.header-container{padding-top:18px;padding-bottom:18px}
.logo h1,.nav-brand{letter-spacing:-.7px}
.logo p{letter-spacing:.7px;text-transform:uppercase}
.container,.main-container,.main-content{max-width:1440px}
.product-card,.stat-card,.summary-card,.order-card,.cart-item,.profile-card,.checkout-section,.chart-card,.table-container{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.product-card{transition:transform .2s,box-shadow .2s}
.product-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px #19242e12}
.product-info{padding:22px}
.shop-header{max-width:1360px;margin:28px auto;background:linear-gradient(115deg,#19242e,#34464f);border:1px solid #42515b;border-radius:20px;padding:40px 24px}
.shop-header h1{letter-spacing:-1.8px}
.shop-header p{color:#d0d8de}
.shop-badge{border-radius:6px;font-size:10px;letter-spacing:1.5px}
.shop-primary-btn{border-radius:9px;background:#f6a363;color:#19242e;box-shadow:none}
.shop-primary-btn:hover{background:#ffc08c;box-shadow:none}
.shop-top-seller{box-shadow:none;background:#ffffff08}
@media(max-width:850px){.shop-header{margin:16px;border-radius:16px;padding:28px 18px}}
.product-info h3{line-height:1.4;letter-spacing:-.3px}
.product-image{background:#f0f2f3}
.product-image img{object-fit:contain;padding:14px}
.product-price{color:var(--accent);letter-spacing:-.6px}
.hero,.welcome-banner{border-radius:20px;background:linear-gradient(115deg,#19242e,#32434b);color:#fff;border:1px solid #42515b;box-shadow:var(--shadow)}
.hero h1,.hero h2,.welcome-banner h1,.welcome-banner h2{letter-spacing:-1.2px}
.search-box input,.search-input{border:1px solid var(--line);border-radius:10px;background:#fff}
.category-btn,.filter-btn{border-radius:8px}
.category-btn.active,.filter-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}
.stat-card{padding:24px;background:#fff}
.stat-value,.stat-number{letter-spacing:-1.2px}
th{font-size:11px;letter-spacing:.7px;text-transform:uppercase;background:#f6f8fa;color:var(--muted)}
td{border-bottom-color:#edf0f2}
.page-title,h1,h2{letter-spacing:-.6px}
.add-to-cart-btn,.checkout-btn,.place-order-btn{background:var(--accent);border-radius:10px;box-shadow:none}
.add-to-cart-btn:hover,.checkout-btn:hover,.place-order-btn:hover{background:var(--accent-hover)}
.admin-page form[hidden]{display:none}
.security-panel{margin:18px 0 8px;min-height:85px;text-align:left}
.security-widget{min-width:0;width:100%}
.security-status{font-size:12px;color:var(--muted);margin:8px 0;line-height:1.5}
.security-retry{font-size:12px;padding:5px 0;color:var(--accent);background:none;border:0;text-decoration:underline;cursor:pointer}
.security-retry[hidden]{display:none}
/* Customer and administrator sign-in share the same layout. */
body.auth-page{min-height:100svh;padding:48px max(24px,6vw);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,440px);gap:8vw;align-items:center;background:#14212a;position:relative;isolation:isolate}
body.auth-page::before{position:fixed;inset:0;content:'';background:linear-gradient(90deg,#14212a 3%,#14212aeb 42%,#14212aaa),url('../../covid.jpg') center/cover;opacity:1;z-index:-2}
body.auth-page::after{position:fixed;inset:0;content:'';background:radial-gradient(ellipse at 0 100%,#e4812920,transparent 60%);z-index:-1}
.auth-story{color:#fff;max-width:620px;position:relative;z-index:1}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:64px;font-size:15px;font-weight:700;letter-spacing:.2px}
.auth-brand img{width:44px;height:44px;border-radius:10px;object-fit:contain;background:#fff}
.auth-kicker{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#ffc08c;font-weight:700;margin-bottom:18px}
.auth-story h2{font-size:clamp(38px,4.5vw,68px);line-height:1.08;font-weight:800;letter-spacing:-2.5px;margin:0 0 24px;text-wrap:balance}
.auth-story h2 span{color:#f6a363}
.auth-story>p:not(.auth-kicker){font-size:16px;line-height:1.8;color:#c4cdd4;max-width:410px}
.auth-details{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid #ffffff26;padding-top:24px;margin-top:42px;font-size:12px;color:#e0e6ea}
.auth-details span{display:flex;align-items:center;gap:8px}
.auth-details i{color:#f6a363}
body.auth-page>.login-container{width:100%;max-width:none;margin:0;padding:36px;border-radius:20px;background:#fff;border:1px solid #ffffff90;box-shadow:0 28px 80px #0003;backdrop-filter:none;animation:none;position:relative;z-index:2}
.auth-page .logo-section{text-align:left;margin-bottom:26px}
.auth-page .logo-section .logo-icon{display:none}
.auth-page .logo-section h1{font-size:21px;color:var(--ink);letter-spacing:-.7px}
.auth-page .logo-section h1 .brand-name{color:var(--accent)}
.auth-page .logo-section p{font-size:12px;color:var(--muted);margin-top:3px}
.auth-heading{font-size:29px;line-height:1.2;margin:0 0 8px;color:var(--ink);font-weight:800;letter-spacing:-1px}
.auth-description{font-size:13px;color:var(--muted);margin-bottom:26px;line-height:1.65}
.auth-page .input-group label{font-size:12px;font-weight:600;margin-bottom:8px}
.auth-page .input-group input,.auth-page .input-group textarea,.login-card .login-input{border:1px solid #d8e0e6;border-radius:9px;background:#fafbfc;padding:13px 14px;font-size:14px;min-height:47px}
.auth-page .password-wrapper input{padding-right:80px}
.auth-page .auth-btn,.admin-page #loginPage .login-btn{border-radius:9px;background:var(--accent);min-height:48px;font-size:14px;letter-spacing:0;box-shadow:none}
.auth-page .auth-btn:hover,.admin-page #loginPage .login-btn:hover{background:var(--accent-hover);transform:none;box-shadow:none}
.auth-page .forgot-password-link{font-size:12px;margin-top:17px;color:var(--accent)}
.auth-page .auth-switcher{border-top:1px solid var(--line);padding-top:20px;margin-top:24px;font-size:12px}
.auth-page .auth-switcher button{color:var(--accent)}
.auth-page .signup-dialog{border-radius:18px;box-shadow:0 24px 70px #0003}
.admin-page #loginPage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,440px);gap:8vw;padding:48px max(24px,6vw);background:#14212a;isolation:isolate}
.admin-page #loginPage::before{background:linear-gradient(90deg,#14212a 3%,#14212aeb 42%,#14212aaa),url('../../covid.jpg') center/cover;z-index:-1}
.admin-page #loginPage .login-card{width:100%;padding:36px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 28px 80px #0003;text-align:left;animation:none}
.admin-page #loginPage .admin-login-logo{width:58px;height:58px;margin:0 0 16px}
.admin-page #loginPage .login-card h2{font-size:27px;letter-spacing:-1px}
.admin-page #loginPage .subtitle{font-size:13px}
.admin-page #loginPage .admin-tag{background:#f6ede7;color:var(--accent);border-radius:6px;font-size:10px;letter-spacing:1px}
.admin-page #loginPage label{display:block;font-size:12px;font-weight:600;margin-top:14px}
.admin-page #loginPage .bg-credit{display:none}
.recovery-page{min-height:100svh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 10% 0,#29404c,transparent 75%),#14212a}
.recovery-page .recovery-card,.recovery-page .card{width:min(100%,480px);padding:36px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 28px 80px #0003}
.recovery-page h1{font-size:30px;line-height:1.2;letter-spacing:-1px}
.recovery-page .brand-mark{border-radius:12px;background:var(--ink);color:#ffc08c;box-shadow:none}
.recovery-page .submit-button,.recovery-page button[type=submit]{background:var(--accent);border-radius:9px;box-shadow:none}
.recovery-page input{border:1px solid #d8e0e6;border-radius:9px;background:#fafbfc;min-height:48px}
@media(min-width:1500px){body.auth-page,.admin-page #loginPage{padding-left:max(6vw,calc((100vw - 1320px)/2));padding-right:max(6vw,calc((100vw - 1320px)/2))}}
@media(max-width:850px){body.auth-page,.admin-page #loginPage{grid-template-columns:1fr;gap:30px;padding:32px 22px;justify-items:center}.auth-story{width:100%;max-width:440px}.auth-brand{margin-bottom:26px}.auth-story h2{font-size:38px;letter-spacing:-1.4px;margin-bottom:14px}.auth-story>p:not(.auth-kicker){font-size:14px}.auth-details{display:none}body.auth-page>.login-container,.admin-page #loginPage .login-card{max-width:440px;padding:28px}.auth-story .auth-kicker{margin-bottom:12px}.auth-page .chatbot-actions{right:16px;bottom:16px}}
@media(max-width:420px){body.auth-page,.admin-page #loginPage{padding:24px 14px}.auth-story h2{font-size:32px}.auth-brand{margin-bottom:20px}body.auth-page>.login-container,.admin-page #loginPage .login-card{padding:24px 20px}.auth-page .chatbot-actions .app-install-btn{display:none}.recovery-page .recovery-card,.recovery-page .card{padding:28px 20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.login-page{background:#14212a}.login-page>.login-container{border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}