[data-theme=dark]{--bg:#021617;--fg:#e7e9f1;--muted:#9aa3b2;--primary:#6aa7ff;--primary-contrast:#0b0f1a;--surface:#0e1422;--surface-2:#0b0f1a;--card: rgba(255,255,255,.04);--border: rgba(255,255,255,.12);--ring: rgba(106,167,255,.35);--shadow: 0 16px 32px rgba(0,0,0,.35);--shadow-hover: 0 24px 50px rgba(0,0,0,.45)}body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.container{width:min(1100px,92vw);margin-inline:auto;padding-block:1.5rem}.grid{display:grid;gap:var(--gap)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}@media(max-width:900px){.grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}.card{background:rgba(124,125,115,.5);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition),background var(--transition)}.card.hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn{appearance:none;border:1px solid var(--border);background:var(--surface);padding:.7rem 1rem;border-radius:calc(var(--radius) - 6px);cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),background var(--transition),border-color var(--transition),color var(--transition)}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}.btn.primary{background:var(--primary);border-color:transparent;color:var(--primary-contrast)}.btn.ghost{background:transparent;border-color:var(--border)}.input,input[type=text],input[type=search],input[type=number],select{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) - 8px);padding:.7rem .9rem;color:var(--fg);transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}.input:focus,input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.9rem}.badge{display:inline-block;padding:.35rem .6rem;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;font-size:.8rem;color:var(--muted)}.toast{position:fixed;inset:auto 1rem 1rem auto;display:grid;gap:.5rem;width:min(360px,92vw);z-index:60}.toast .msg{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:.85rem 1rem}.navbar{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}.brand{font-weight:700;letter-spacing:.2px;text-decoration:none;color:var(--fg)}.product{display:flex;flex-direction:column;gap:.6rem;padding:.9rem}.product img{width:100%;height:auto;border-radius:calc(var(--radius) - 8px);border:1px solid var(--border);background:var(--surface)}.drawer{position:fixed;top:0;right:0;width:min(420px,92vw);height:100dvh;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-hover);transform:translate(100%);transition:transform var(--transition);z-index:70;display:flex;flex-direction:column}.drawer.open{transform:translate(0)}.drawer .drawer-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border);background:var(--card)}.drawer .drawer-body{padding:1rem;overflow:auto;flex:1}.drawer .drawer-footer{padding:1rem;border-top:1px solid var(--border);display:flex;gap:.6rem;background:var(--card)}.fade-in{animation:fadeIn .25s ease both}@keyframes fadeIn{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}.hidden{display:none!important}.wide{width:100%}:root{--bg:#f5f7fb;--fg:#e7e9f1;--muted:#a6abbd;--primary:#87cefa;--glass:rgba(255,255,255,.08);--card:rgba(255,255,255,.06);--border:rgba(255,255,255,.12);--radius:16px;--gap:1rem;--shadow:0 20px 40px rgba(0,0,0,.15);--shadow-hover:0 24px 50px rgba(0,0,0,.25);--focus: 0 0 0 3px rgba(106,167,255,.35);--font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--brand: var(--theme-primary, #6f69d3)}html[data-theme=light]{--bg:#f5f7fb;--fg:#101010;--muted:#657089;--primary:#62bd9e;--glass:rgba(0,0,0,.04);--card:rgba(27, 137, 123, .74);--card2:rgba(143,143,143,.74);--border:#9dadad;--shadow:0 10px 24px rgba(0,0,0,.08);--shadow-hover:0 18px 32px rgba(0,0,0,.14);--focus: 0 0 0 3px rgba(10,124,255,.25);--brand: var(--theme-primary, #c1ff00)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;display:flex;flex-direction:column;background:radial-gradient(1200px 600px at 10% 0%,#01dff6 0%,var(--bg) 60%),var(--bg);background-attachment:fixed;background-size:cover}main{flex:1}.container{max-width:1200px;margin:0 auto;padding:1rem}a{color:inherit;text-decoration:none}a.link{text-decoration:underline;text-underline-offset:3px}img{display:block;max-width:100%;height:auto}:focus-visible{outline:none;box-shadow:var(--focus)}.glass{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius)}.brand{font-weight:800;letter-spacing:.5px}.nav-links{display:flex;gap:.35rem;margin-left:.5rem}.search{margin-left:auto;display:flex;gap:.5rem;align-items:center}.nav-right{display:flex;gap:.5rem;align-items:center}input,select,textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--border);border-radius:12px;background:transparent;color:inherit;margin-top:5px}input.is-valid{border-color:#16a34a}input.is-invalid{border-color:#dc2626}form.was-validated input:invalid{border-color:#dc2626}button,.btn{padding:.6rem .9rem;border-radius:12px;border:1px solid var(--border);background:transparent;color:inherit;cursor:pointer;transition:transform .06s ease}.btn{background:var(--brand);color:#fff;border-radius:12px;box-shadow:var(--shadow)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--primary);border-color:var(--primary);color:#030557}.btn.primary span{display:inline-block;position:relative;transition:.5s}.btn.primary span:after{content:"»";position:absolute;opacity:0;right:-20px;transition:.5s}.btn.primary:hover span{padding-right:25px}.btn.primary:hover span:after{opacity:1;right:0}.btn.ghost{background:transparent;font-size:17px}.ghost:hover{background-color:#f44336;color:#fff;cursor:pointer}.save_button:hover{background-color:#e7e7e7;color:#000;cursor:pointer}.save_button span{display:inline-block;position:relative;transition:.5s}.save_button span:after{content:"»";position:absolute;opacity:0;right:-20px;transition:.5s}.save_button:hover span{padding-right:25px}.save_button:hover span:after{opacity:1;right:0}.secondary{font-size:13.3333px;padding:.6rem .9rem;border-radius:12px;border:1px solid var(--border);background:transparent;color:inherit;transition:transform .06s ease}.secondary:hover{background-color:#f44336;color:#fff;cursor:pointer}.cart-btn{flex:1;display:flex}.cart-btn .btn{width:100%}.btn-secondary[disabled]{opacity:.6;cursor:not-allowed;background:#ccc;color:#666}.btn small{margin-bottom:100px}form.card input,form.card select{background:var(--card2);border:1px solid var(--border);border-radius:var(--radius);padding:.7rem .9rem;color:var(--fg)}form.card label{font-weight:600;margin-bottom:.3rem;display:block}.form-actions .btn{min-width:120px}h1,h2,h3{margin:.3rem 0 1rem}h1{font-size:1.9rem;line-height:1.2}h2{font-size:1.4rem}h3{font-size:1.1rem}.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.grid{margin-top:15px}.card{background:rgba(57,84,101,.43);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.card.hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.cover-wrap{display:block;border-radius:12px;overflow:hidden}.card img,.product-detail .cover{width:100%;height:220px;object-fit:cover;background:#13162a}.card-body{display:flex;flex-direction:column;gap:.6rem}.card,.p{padding-bottom:25px;padding-top:25px;margin-top:10px;margin-bottom:10px}.inline{display:inline-flex;gap:.5rem;align-items:center;margin-bottom:100px}.price{font-weight:800}.price.xl{font-size:1.5rem}.category-row{margin-top:15px}.hero{display:grid;place-items:center;min-height:140px;background:linear-gradient(135deg,rgba(106,167,255,.18),transparent 60%)}.hero-content{width:100%}.footer{border-top:1px solid var(--border);padding:2rem 1rem;margin-top:auto;background:var(--card)}.footer-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.footer a{color:var(--primary);text-decoration:none}.footer a:hover{text-decoration:underline}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:.8rem;border-bottom:1px solid var(--border);text-align:left}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}.form-grid .col-span{grid-column:1 / -1}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.badge{padding:.25rem .6rem;border-radius:999px;background:var(--glass);border:1px solid var(--border)}.row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.product_description{margin-top:15px}.table{width:100%;border-collapse:collapse;font-size:.95rem}.table th,.table td{padding:.5rem .6rem;vertical-align:middle;line-height:1.3}.table tr:hover{background:var(--glass);transition:background .2s ease}.table th{font-weight:600;color:var(--muted);text-align:left}.table td img,.table td .cover{border-radius:10px;width:100px;height:auto;object-fit:cover}.table .actions{display:flex;align-items:center;justify-content:center;gap:.45rem;height:100%;padding-bottom:36px!important}.table .actions form{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0}.table .btn.small{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--fg);font-size:.9rem;line-height:1;cursor:pointer;transition:all .2s ease;padding:0}.table .btn.small:hover{background:var(--glass);border-color:var(--primary);transform:translateY(-1px)}.table .badge{display:inline-block;padding:.15rem .6rem;font-size:.8rem;border-radius:999px;font-weight:600}.table.products td img.cover{display:block;width:auto;height:60px!important;object-fit:cover;border-radius:10px;margin:0!important;padding:0!important}} .table th,.table td{padding:.4rem .6rem;border-bottom:1px solid var(--border);line-height:1.3;vertical-align:middle}.table.users .actions{display:flex;align-items:center;justify-content:center;gap:.4rem}.table.users .btn.small{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--fg);transition:all .2s ease}.table.users .btn.small:hover{background:var(--glass);border-color:var(--primary);transform:translateY(-1px)}.table.products td{vertical-align:middle}.table.products .actions{display:flex;align-items:center;justify-content:center;gap:.4rem;height:100%;padding-bottom:20px}.table.products .actions form{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0}.table.products .btn.small{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--fg);font-size:.9rem;cursor:pointer;transition:all .2s ease;padding:0;line-height:1}.table.products .btn.small:hover{background:var(--glass);border-color:var(--primary);transform:translateY(-1px)}.table .btn.small.edit{color:var(--primary);border-color:#87cefa4d}.table .btn.small.edit:hover{background:#87cefa26}.table.products .btn.small.edit{color:var(--primary);border-color:#87cefa4d}.table.products .btn.small.edit:hover{background:#87cefa26}.table .btn.small.danger{color:#ff7b7b;border-color:#ff63634d}.table .btn.small.danger:hover{background:#ff636326;border-color:#ff636366;color:#faa}.table.products .btn.small.danger{color:#ff7b7b;border-color:#ff63634d}.table.products .btn.small.danger:hover{background:#ff636326;border-color:#ff636366;color:#faa}.search-bar{display:flex;gap:.6rem;margin-bottom:1.2rem}.search-bar input{flex:1;padding:.6rem .8rem;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--fg);transition:border-color .25s ease,box-shadow .25s ease}.search-bar input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus)}.search-bar .btn.small{height:36px;padding:.4rem 1rem;border-radius:10px;background:var(--primary);border:none;color:#030557;cursor:pointer;transition:all .25s ease}.search-bar .btn.small:hover{background:#87cefad9;transform:translateY(-1px)}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:10px;padding:.55rem 1rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all .2s ease;line-height:1.2}.btn.primary:not(.small){background:var(--primary);border-color:var(--primary);color:#030557;font-size:.95rem;padding:.6rem 1.2rem;box-shadow:0 4px 12px #87cefa33}.btn.primary:not(.small):hover{background:#5abfff;border-color:#5abfff;transform:translateY(-1px);box-shadow:0 6px 18px #87cefa59}main.container.admin{padding-top:2rem}.admin-header{background:var(--glass);padding:1.5rem 2rem;border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;transition:all .3s ease}.admin-header:hover{box-shadow:var(--shadow-hover)}.admin-header h1{font-size:1.8rem;display:flex;align-items:center;gap:.6rem}.search-bar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem 1rem;display:flex;gap:.8rem;align-items:center;box-shadow:var(--shadow);margin-bottom:1.5rem;transition:box-shadow .25s ease}.search-bar:hover{box-shadow:var(--shadow-hover)}.search-bar input{flex:1;border:none;background:transparent;font-size:1rem}.search-bar input::placeholder{color:var(--muted);opacity:.8}.table.products tbody tr{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .3s ease}.table.products td,.table.products th{border:none;padding:1rem 1.2rem}.table.products th{text-transform:uppercase;letter-spacing:.8px;font-size:.8rem;color:var(--muted)}.table.products td img{width:80px;height:auto;border-radius:10px;object-fit:cover}.table.products .actions{display:flex;justify-content:center;gap:.6rem;opacity:.9;transition:opacity .25s ease}.table.products tbody tr:hover .actions{opacity:1}.btn.small{border:none;box-shadow:0 2px 6px #00000026}.btn.small.edit{background:#87cefa26;color:var(--primary)}.btn.small.edit:hover{background:var(--primary);color:#031636}.btn.small.danger{background:#ff636326;color:#ff7b7b}.btn.small.danger:hover{background:#ff7b7b;color:#fff}.pager{margin-top:2rem;display:flex;justify-content:center;align-items:center;gap:1rem;font-size:.95rem}.pager .btn.secondary.small{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.5rem 1rem}.pager span{opacity:.8}@media(max-width:800px){.admin-header{flex-direction:column;align-items:stretch;text-align:center;gap:1rem}.table-wrap{overflow-x:scroll;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-color:var(--muted) var(--card);scrollbar-width:thin}.table-wrap::-webkit-scrollbar{height:8px}.table-wrap:after{content:"← Scrollen →";display:block;text-align:center;font-size:.8rem;color:var(--muted);padding-top:.3rem}.table-wrap::-webkit-scrollbar-track{background:var(--card);border-radius:8px}.table-wrap::-webkit-scrollbar-thumb{background:var(--muted);border-radius:8px}.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--primary)}.table.products{width:210%;table-layout:auto;white-space:normal}.table.products tbody tr{display:table-row!important;flex-direction:row;gap:.4rem}.table.products td:nth-child,.table.products th:nth-child{display:table-cell!important}}.table.products th:nth-child(5){min-width:120px;white-space:nowrap}.admin-header .btn.primary{font-size:1rem;background:var(--primary);border-color:var(--primary);color:#030557;padding:.6rem 1.2rem;border-radius:12px;box-shadow:0 4px 10px #87cefa33;transition:all .25s ease}.admin-header .btn.primary:hover{background:#5abfff;border-color:#5abfff;transform:translateY(-1px);box-shadow:0 6px 18px #87cefa59}.checkout-form{display:flex;flex-direction:column;gap:2rem}.checkout-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem}.checkout-form label{display:flex;flex-direction:column;font-weight:500}.actions{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}@media(max-width:768px){.checkout-form .grid{grid-template-columns:1fr}}.flex{display:flex}.between{justify-content:space-between}.align-center{align-items:center}.gap-sm{gap:.5rem}.muted{color:var(--muted)}.hide-sm{display:inline}@media(max-width:800px){.hide-sm{display:none}}.nav.glass{position:sticky;top:0;z-index:1000;padding:.65rem 1rem;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius)}.nav .container{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:1rem}.brand{font-weight:800;letter-spacing:.3px white-space: nowrap}.nav .search{flex:1 1 520px;max-width:640px;display:flex;align-items:center;gap:.5rem;margin:0 1rem}.nav .search input{flex:1 1 auto;min-width:160px;padding:.5rem .7rem;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--fg)}.nav .search button{background:var(--primary);border:none;color:#030557;font-weight:600;border-radius:10px;padding:.5rem 1rem;transition:transform .2s ease}.nav .search button:hover{transform:translateY(-1px)}.nav-right{display:flex;align-items:center;gap:.6rem;white-space:nowrap}.nav .link{padding:.35rem .5rem;border-radius:var(--radius)}.nav .link:hover{background:var(--card)}.only-sm{display:none!important}.hide-sm{display:inherit}.burger{border:1px solid var(--border);background:var(--card);padding:.5rem .75rem;border-radius:10px;line-height:1}.burger:focus-visible{box-shadow:var(--focus);outline:none}.burger.only-sm{align-items:center;justify-content:center}.mobile-menu{display:none;border-top:1px solid var(--border);background:var(--glass);padding:.75rem 1rem}.mobile-menu .stack{display:flex;flex-direction:column;gap:.5rem}.mobile-menu .search{margin:0 0 .5rem}[x-cloak]{display:none!important}@media(max-width:780px){.only-sm{display:inline-flex!important}.hide-sm{display:none!important}.nav .container{flex-direction:column;align-items:stretch;gap:.6rem}.nav .search{display:none}.mobile-menu{display:none!important}.mobile-menu.only-sm.open{display:block!important}.mobile-menu a,.mobile-menu button{padding:.5rem .4rem;border-radius:10px}.mobile-menu a:hover,.mobile-menu button:hover{background:var(--card)}.nav.glass{border-bottom-left-radius:0;border-bottom-right-radius:0}}.nav a:focus-visible,.nav button:focus-visible{box-shadow:var(--focus);outline:none}@media(max-width:800px){.table.products tbody tr{display:table-row!important}}.table.orders tbody tr{background:var(--card);border-radius:var(--radius);box-shadow:none;border-bottom:1px solid var(--border);transition:background .25s ease}.table.orders tbody tr:hover{background:var(--glass)}.table.orders td{padding:.9rem 1.2rem;border:none}.table.orders{border-collapse:separate;border-spacing:0;width:100%;border-radius:var(--radius);overflow:hidden}.table.orders th{background:#ffffff0d;font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:.8rem;color:var(--muted);padding:.8rem 1.2rem}.table.orders .actions{display:flex;justify-content:center;gap:.6rem}.badge.order-status{display:inline-block;padding:.25rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:var(--glass);color:var(--fg);border:1px solid var(--border)}.badge.order-status.new{background:#87cefa26;color:var(--primary);border-color:#87cefa4d}.badge.order-status.processing{background:#ffd70026;color:gold;border-color:#ffd7004d}.badge.order-status.shipped{background:#adff2f26;color:#adff2f;border-color:#adff2f4d}.badge.order-status.canceled{background:#ff636326;color:#ff7b7b;border-color:#ff63634d}.maint-float{width:100%;display:flex;justify-content:center;padding:.75rem 0;background:transparent;animation:slideDown .4s ease-in-out;position:relative;z-index:50}.maint-card{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border-radius:12px;background:#fffffff2;color:#1a1a1a;box-shadow:0 6px 16px #00000026;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative;z-index:51}.maint-icon{font-size:1.1rem}.maint-text{display:flex;flex-direction:column;line-height:1.1}.maint-text strong{font-weight:600}.maint-text small{opacity:.8;margin-top:2px}.maint-close{margin-left:1rem;background:transparent;border:0;font-size:1.4rem;line-height:1;cursor:pointer;opacity:.8;transition:opacity .2s}.maint-close:hover{opacity:1}[data-theme=dark] .maint-card{background:#14141ccc;color:#ffe69c;box-shadow:0 6px 20px #00000080,inset 0 0 0 1px #ffffff14}@keyframes slideDown{from {opacity: 0; transform: translateY(-10px);} to {opacity: 1; transform: translateY(0);} .maint-float {animation: fadeIn .4s ease-in-out;} .is-hidden {display: none;} @media (max-width: 600px) {.maint-float {padding: .5rem 0;} .maint-card {gap: .6rem; padding: .6rem .75rem; border-radius: 10px; max-width: 96vw;} .maint-icon {font-size: 1rem;} .maint-text {flex-direction: row; align-items: center; gap: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 120px) ;} .maint-text strong {font-size: .95rem;} .maint-text small {font-size: .85rem; opacity: .9;} .maint-close {font-size: 1.2rem; margin-left: .25rem; padding: .5rem; line-height: 1;}} @media (max-width: 420px) {.maint-text small::before {content: "⚠"; opacity: .6; margin: 0 .15rem 0 .2rem;}} @media (max-width: 360px) {.maint-text small {display: none;} .maint-text {max-width: calc(100vw - 88px) ;}} @media (prefers-reduced-motion: reduce) {.maint-float {animation: none;}} @media (max-width: 360px) {.maint-icon {display:none;}} .alert{border:1px solid var(--border); background:var(--card); border-radius:16px; padding:1rem;} .alert-success{border-color:rgba(16,185,129,.3);} .alert-success::after {content: ""; position: absolute; bottom: 0; left: 0; height: 3px; background: progress 3s linear forwards} @keyframes progress {from {width: 0;} to {width: 100%;}} .alert-warn{border-color:rgba(234,179,8,.35);} .alert-error{background:rgba(231,76,60,.15);border-color:rgba(239,68,68,.35);color:#e74c3c} .alert{animation:fadeIn .35s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} :root{ --radius: 12px; --line: rgba(255,255,255,.1); --card: #141820; --glass: rgba(255,255,255,.04); --primary: #3aa6ff; --primary-2: #7b61ff; } html[data-theme="light"]{ --line: #e3e6ef; --card: #ffffff; --glass: rgba(0,0,0,.03); --primary: #186ef6; --primary-2: #6a5bff; } body{background: radial-gradient(900px 420px at 12% -6%,rgba(58,166,255,.08) 0%,transparent 55%),var(--bg) !important; background-attachment: fixed; background-size: cover;} input,select,textarea{background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; color: var(--fg); box-shadow: none !important;} input::placeholder{color: var(--muted); opacity:.9;} input:focus,select:focus,textarea:focus{outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(58,166,255,.18) !important;} .btn,button{border: 1px solid var(--line) !important; border-radius: var(--radius); background: var(--card); color: var(--fg); box-shadow: none; transition: transform .06s ease,background .2s ease,border-color .2s ease;} .btn:hover{box-shadow:var(--shadow-hover); transform: translateY(-1px);} .btn:active{transform: translateY(1px);} .btn.primary{background: var(--primary) !important; border-color: var(--primary) !important; color: #0b1220 !important; box-shadow: 0 4px 12px rgba(0,0,0,.15);} .btn.primary:hover{background: #2897ff !important; border-color: #2897ff !important;} .btn.small{border: none; background: var(--card);} a,.link{color: inherit; text-decoration: none; text-shadow: none !important;} a:hover,.link:hover{color: var(--primary);} .badge{background: var(--glass) !important; border: 1px solid var(--line) !important; box-shadow: none !important; text-shadow: none !important;} .card{background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: 0 10px 24px rgba(0,0,0,.14);} .card.hover:hover{box-shadow: 0 16px 34px rgba(0,0,0,.2);} .nav.glass{background: var(--glass); border: 1px solid var(--line);} .nav .link:hover{background: var(--card);} .nav .search input{border: 1px solid var(--line); background: var(--card);} h1,h2,h3{letter-spacing:.2px;} h1{color: var(--fg); opacity:.98;} h2,h3{color: var(--fg); opacity:.94;} .table .btn.small{background: var(--card); border: 1px solid var(--line); box-shadow: none;} .table .btn.small.edit{color: var(--primary); border-color: rgba(58,166,255,.35);} .table .btn.small.edit:hover{background: rgba(58,166,255,.15);} .table .btn.small.danger{color: #ff7b7b; border-color: rgba(255,99,99,.35);} .table .btn.small.danger:hover{background: rgba(255,99,99,.15);} .category-row .btn,.category-row a{border: 1px solid var(--line) !important; background: var(--card) !important; color: var(--fg) !important;} .category-row .btn:hover,.category-row a:hover{background: var(--glass) !important;} .toast {position: fixed;bottom: 24px;right: 24px;padding: 10px 16px;border-radius: 8px; font-size: 14px;font-weight: 500;z-index: 9999;opacity: 0;animation: fadeInOut 3s forwards; box-shadow: 0 4px 10px rgba(0,0,0,.2);pointer-events: none; transition: transform .3s ease,opacity .3s ease;} .toast.info {background: #374151;color: #fff;} .toast.success {background: #16a34a;color: #fff;} .toast.error {background: #dc2626;color: #fff;} @keyframes fadeInOut {0% {opacity: 0;transform: translateY(10px);} 10% {opacity: 1;transform: translateY(0);} 90% {opacity: 1;transform: translateY(0);} 100% {opacity: 0;transform: translateY(10px);}} :root[data-theme="dark"] .toast.info {background: #111827;color: #e5e7eb;} :root[data-theme="dark"] .toast.success {background: #22c55e;color: #f0fdf4;} :root[data-theme="dark"] .toast.error {background: #ef4444;color: #fff;} .center-narrow{max-width:560px; margin:3rem auto;} .p-2{padding:2rem;} .text-center{text-align:center;} .text-right{text-align:right;} .fw-bold{font-weight:600;} .alert {border:1px solid var(--border); border-radius:14px; padding:.75rem 1rem; margin:.5rem 0; background:var(--card);} .alert.info{border-color:#60a5fa33;} .alert.success{border-color:#34d39933;} .alert.warn{border-color:#f59e0b33;} .alert.error{border-color:#ef444433;} .cart-item-img {width: 72px; height: 72px; object-fit: cover;} .product.card .product-card-image {width: 100%; aspect-ratio: 4 / 5; background: #ffffff; border-radius: .8rem; overflow: hidden; display: flex; align-items: center; justify-content: center;} .product.card .product-card-image img {max-width: 100%; max-height: 100%; object-fit: contain; display: block;} .product-detail .product-media {display: flex; flex-direction: column; gap: 1rem;} .product-main-image {width: 100%; max-width: 600px; margin: 0 auto; aspect-ratio: 4 / 5; background: #ffffff; border-radius: 1.2rem; overflow: hidden; display: flex; align-items: center; justify-content: center;} .product-main-image .product-image {max-width: 100%; max-height: 100%; object-fit: contain; display: block;} .product-thumbs {display: flex; gap: .7rem; margin-top: 1rem; flex-wrap: wrap;} .product-thumb {width: 70px; height: 70px; border-radius: .6rem; object-fit: contain; background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,.2); cursor: pointer; display: block;} .product-short {font-size: 1rem; color: var(--text-secondary); margin-top: .5rem; margin-bottom: .5rem;} .product-features {margin-top: 2rem;} .product-features h2 {font-size: 1.2rem; margin-bottom: .5rem;} .product-features ul {padding-left: 1.2rem; margin: 0;} .product-features li {margin-bottom: .3rem;} .product-details {margin-top: 2rem;} .product-details h2 {font-size: 1.2rem; margin-bottom: .5rem;} .product-details h3 {margin-top: 1rem; font-size: 1.05rem} .recommend-image {width: 100%; aspect-ratio: 4 / 5; background: #ffffff; border-radius: .8rem; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 18px rgba(0,0,0,.2);} .recommend-image img {max-width: 100%; max-height: 100%; object-fit: contain; display: block;} .product-detail {display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: 2.5rem; align-items: flex-start; margin-top: 2rem;} @media (max-width: 900px) {.product-detail {grid-template-columns: 1fr;}} .product-info {background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.75rem; box-shadow: var(--shadow);} .product-title {font-size: 1.6rem; font-weight: 700; margin: 0;} .product-category {margin-top: .4rem; font-size: .9rem; color: var(--muted);} .product-price {font-size: 1.6rem; font-weight: 700; margin: .9rem 0 .4rem; color: var(--accent, var(--brand));} .stock {display: flex; align-items: center; gap: .4rem; font-size: .95rem; margin-bottom: .4rem;} .stock-icon {font-size: 1rem;} .stock.out-of-stock {color: #ff7575;} .cart-form {display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .8rem;} .qty-input {width: 80px; padding: .3rem .4rem; border-radius: .5rem; border: 1px solid var(--border); background: rgba(0,0,0,.1);} .product-meta {font-size: .8rem; color: var(--muted); margin-top: .6rem;} .recommendations {margin-top: 3rem; padding: 2rem; border-radius: 1.2rem;} .recommendations h2 {margin-bottom: 1rem; font-size: 1.3rem;} .recommend-grid {display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 1.6rem;} .recommend-item {background: var(--card); border-radius: 1rem; padding: 1rem; box-shadow: var(--shadow); text-align: center; transition: transform .15s ease,box-shadow .15s ease;} .recommend-item:hover {transform: translateY(-3px); box-shadow: var(--shadow-hover);} .recommend-image {width: 100%; aspect-ratio: 4 / 5; background: #ffffff; border-radius: .8rem; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 18px rgba(0,0,0,.2);} .recommend-image img {max-width: 100%; max-height: 100%; object-fit: contain; display: block;} .recommend-name {margin-top: .75rem; font-weight: 600; font-size: .95rem;} .recommend-price {margin-top: .3rem; color: var(--accent, var(--brand)); font-weight: 700; font-size: .95rem;} @media (min-width: 1024px) {img.product-image,.product-card img,.product-gallery img,.product-main-image img {max-width: 250px; height: auto; object-fit: cover;} .product-card {max-width: 260px;}} :root{--bg:#0f1115; --card:#181a20; --text:#dcdcdc; --text-strong:#0ba7c7; --accent:#8af;} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; animation:fadeInPage 1.2s ease both;} @keyframes fadeInPage{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .secret-banner-backdrop{position:fixed; inset:0; display:grid; place-items:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:color-mix(in srgb,var(--bg) 60%,transparent); z-index:9999; opacity:0; animation:sb-fade .35s ease forwards;} @keyframes sb-fade{to{opacity:1}} .secret-banner-card{width:min(520px,92vw); background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card) 80%,#000)); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:1.4rem 1.2rem 1.2rem; box-shadow:0 20px 60px rgba(0,0,0,.45); position:relative; overflow:hidden; text-align:center; animation: sb-pop .32s cubic-bezier(.2,.75,.25,1) both;} .secret-banner-card::before{content:""; position:absolute; inset:-2px; border-radius:18px; background:radial-gradient(1200px 400px at 50% -20%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 40%),radial-gradient(900px 300px at 120% 120%,color-mix(in srgb,#a0f 25%,transparent),transparent 40%); opacity:.18; pointer-events:none;} @keyframes sb-pop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}} .secret-scanline{position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 80%,#fff),transparent); opacity:.65; animation:scan-move 1.8s ease-in-out infinite;} @keyframes scan-move{0%{transform:translateX(-40%);opacity:.15}50%{transform:translateX(40%);opacity:.65}100%{transform:translateX(120%);opacity:.15}} .secret-icon-wrap{margin:.2rem auto .6rem} .secret-icon{width:88px;height:88px;display:block;margin:0 auto;filter:drop-shadow(0 6px 22px rgba(128,192,255,.25))} .secret-icon .ring{fill:none;stroke:color-mix(in srgb,var(--accent) 80%,white);stroke-width:2.4;opacity:.35} .secret-icon .lock{fill:color-mix(in srgb,var(--accent) 14%,var(--card));stroke:color-mix(in srgb,var(--accent) 60%,white);stroke-width:2} .secret-icon .shackle{fill:none;stroke:color-mix(in srgb,var(--accent) 70%,white);stroke-width:2.2;stroke-linecap:round} .secret-icon .check{fill:none;stroke:#9ef;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:42;stroke-dashoffset:42;animation:draw-check .85s ease-out .35s forwards} @keyframes draw-check{to{stroke-dashoffset:0}} .secret-text h2{margin:.2rem 0 .25rem;font-size:1.25rem;font-weight:600;color:var(--text-strong);letter-spacing:.2px;text-shadow:0 1px 6px rgba(0,0,0,.35)} .secret-text p{margin:0 0 .8rem;color:color-mix(in srgb,var(--text) 85%,#fff);opacity:.9} .secret-dismiss{appearance:none; border:0; border-radius:999px; padding:.6rem 1rem; font-weight:600; background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 75%,#fff),color-mix(in srgb,var(--accent) 50%,#000)); color:#0b0f16; box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 35%,transparent); cursor:pointer; transition:transform .15s ease,filter .2s ease,opacity .2s ease;} .secret-dismiss:hover{transform:translateY(-1px)} .secret-dismiss:active{transform:translateY(0);filter:brightness(.95)} @media (prefers-reduced-motion: reduce){.secret-banner-backdrop,.secret-banner-card{animation:none!important} .secret-icon .check{animation:none;stroke-dashoffset:0} .secret-scanline{animation:none;opacity:.25} .secret-banner-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}} .container{max-width:1100px;margin:0 auto;padding:2rem 1rem} .hideout-card{max-width:820px;margin:4rem auto;padding:2.5rem;border-radius:18px; background:linear-gradient(145deg,var(--card),var(--bg)); box-shadow:0 8px 30px rgba(0,0,0,.35); color:var(--text); position:relative; overflow:hidden; transition:all .4s ease; animation:fadeInHideout 1.5s ease forwards;} .hideout-card:hover{transform:translateY(-4px);box-shadow:0 10px 35px rgba(0,0,0,.45)} .hideout-card::before{content:""; position:absolute; inset:-2px; border-radius:20px; background:linear-gradient(120deg,#9ef,#a0f,#9ef); opacity:.05; filter:blur(10px); z-index:0; animation:hideoutGlow 6s ease-in-out infinite alternate;} @keyframes hideoutGlow{from{opacity:.05;filter:blur(10px)}to{opacity:.15;filter:blur(16px)}} @keyframes fadeInHideout{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .hideout-card h1,.hideout-card h2{font-weight:600;color:var(--text-strong);text-shadow:0 1px 6px rgba(0,0,0,.3);position:relative;z-index:1} .hideout-card h1{font-size:2rem;margin-bottom:1.5rem;text-align:center} .hideout-card h2{font-size:1.4rem;margin-top:2.2rem;margin-bottom:.8rem;border-left:4px solid var(--accent);padding-left:.6rem} .hideout-card p,.hideout-card li{line-height:1.6;position:relative;z-index:1;color:var(--text)} .hideout-card ul{margin:.5rem 0 1rem 1.2rem} .hideout-card li{margin-bottom:.3rem} .hideout-card blockquote{margin:1.5rem 0;padding:1rem 1.4rem;background:rgba(255,255,255,.05); border-left:3px solid var(--accent);border-radius:6px;font-style:italic} .hideout-card pre code{display:block;background:rgba(0,0,0,.6);color:#9ef;padding:1rem 1.4rem;border-radius:8px; font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95rem;white-space:pre;overflow-x:auto;box-shadow:0 4px 15px rgba(0,0,0,.4);position:relative;z-index:1} .hideout-card hr{border:none;border-top:1px solid rgba(255,255,255,.1);margin:2rem 0} :root { --maint-bg: rgba(255, 214, 10, .1); --maint-border: rgba(255, 214, 10, .45); --maint-text: #3a2a00; --maint-icon: #f5c400; --maint-glow: rgba(255, 214, 10, .2); --maint-shadow: 0 8px 24px rgba(0,0,0,.12); } [data-theme="dark"] { --maint-bg: rgba(255, 214, 10, .07); --maint-border: rgba(255, 214, 10, .35); --maint-text: #ffea9a; --maint-icon: #ffd95b; --maint-glow: rgba(255, 230, 120, .15); --maint-shadow: 0 10px 28px rgba(0,0,0,.35); } .maint-banner,#maintFloat {position: absolute; left: 0; right: 0; width: 100%; z-index: 1000; transform: translate3d(0,0,0); backface-visibility: hidden; will-change: transform; display: flex; justify-content: center; align-items: center; padding: .75rem 1rem; border-radius: 0;} .page-underlay-clickable {pointer-events: none;} .maint-banner,#maintFloat {pointer-events: auto;} .maint-banner.hidden {transform: translateY(-110%); opacity: 0; transition: transform .4s ease,opacity .3s ease;} .maint-inner strong {font-weight: 600; letter-spacing: .2px; text-shadow: 0 0 6px var(--maint-glow);} .maint-inner strong::before {content: "⚠"; display: inline-block; margin-right: 8px; transform: translateY(.06em); font-size: 1.05em; color: var(--maint-icon);} .maint-inner span {opacity: .9; font-weight: 500; letter-spacing: .15px;} .maint-close {margin-left: auto; appearance: none; border: none; background: transparent; color: var(--maint-text); border-radius: 8px; font-size: 18px; width: 34px; height: 30px; cursor: pointer; display: grid; place-items: center; transition: color .2s ease,background-color .2s ease,transform .15s ease;} .maint-close:hover {background: rgba(255,214,10,.15); color: var(--maint-icon);} .maint-close:active {transform: scale(.94);} @media (max-width: 640px){.maint-inner {max-width: 1100px;margin: 0 auto;padding: 10px 18px;display: flex;align-items: center;gap: 12px;font-size: .95rem;} .maint-close {order: 3;} .maint-inner strong {flex: 1 1 100%;}} .maint-banner.only-home .maint-inner {padding-top: 8px; padding-bottom: 8px;} @keyframes maint-fade-slide {from{opacity:0; transform: translateY(-15px);} to{opacity:1; transform: translateY(0);}} .maint-reopen {position: fixed; top: 10px; left: 12px; z-index: 1201; display: none; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--maint-border); background: linear-gradient(180deg,var(--maint-bg),rgba(0,0,0,.08)); color: var(--maint-text); font-size: .9rem; cursor: pointer; user-select: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .2s ease,transform .2s ease,border-color .2s ease;} .maint-reopen.show {display: inline-flex;} .maint-reopen:hover {transform: translateY(-1px); border-color: rgba(255,214,10,.6);} .maint-reopen:active {transform: translateY(0);} .maint-reopen .tri {font-size: 1rem; color: var(--maint-icon);} .maint-banner,#maintFloat {transform-origin: 50% 50%; backface-visibility: hidden; will-change: transform;} @media (prefers-reduced-motion: reduce) {.maint-banner,#maintFloat {transform: none !important; animation: none !important; transition: none !important; position: static;}} .wave-active {position: absolute !important; left: 0; right: 0; top: 0; width: 100%; z-index: 99999; pointer-events: auto; backface-visibility: hidden; will-change: transform; overflow: hidden; pointer-events: none !important; background: rgba(40,40,40,.45); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border-radius: .5rem; box-shadow: 0 4px 20px rgba(0,0,0,.25); opacity: 0; animation: bannerFadeIn 1.2s ease forwards;} .wave-active[style] {animation: none !important; .wave-active::after {content: ""; position: absolute; inset: -60% -30%; background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 30%,transparent 70%); mix-blend-mode: overlay; opacity: .6; animation: waterLight 12s linear infinite;} @keyframes waterLight {0% {transform: translateY(-10%) rotate(0deg);} 50% {transform: translateY(10%) rotate(180deg);} 100% {transform: translateY(-10%) rotate(360deg);}} header .maint-banner,header #maintFloat {position: static !important; transform: none !important;} .wave-active .maint-inner,.wave-active strong {color: #fdfdfd !important; text-shadow: 0 0 3px rgba(0,0,0,.6);} .wave-active {opacity: 0; animation: bannerFadeIn 1.2s ease forwards;} @media (prefers-color-scheme: dark) {.wave-active {background: rgba(40,40,40,.45); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border: 1px solid rgba(255,255,255,.08);} .wave-active .maint-inner,.wave-active strong {color: #fdfdfd !important; text-shadow: 0 0 4px rgba(0,0,0,.6);}} @media (prefers-color-scheme: light) {.wave-active {background: rgba(20,45,85,.25); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgba(0,0,0,.1);} .wave-active .maint-inner,.wave-active strong {color: #111 !important; text-shadow: 0 0 2px rgba(255,255,255,.4);}} .maint-banner,#maintFloat {background: transparent !important;} html[data-theme="dark"] .wave-active {background: rgba(40,40,40,.45) !important; backdrop-filter: blur(8px) saturate(140%) !important; -webkit-backdrop-filter: blur(8px) saturate(140%) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #fdfdfd !important;} html[data-theme="dark"] .wave-active .maint-inner,html[data-theme="dark"] .wave-active strong {color: #fdfdfd !important;} html[data-theme="light"] .wave-active {background: rgba(20,45,85,.28) !important; backdrop-filter: blur(10px) saturate(160%) !important; -webkit-backdrop-filter: blur(10px) saturate(160%) !important; border: 1px solid rgba(0,0,0,.1) !important; color: #111 !important;} html[data-theme="light"] .wave-active .maint-inner,html[data-theme="light"] .wave-active strong {color: #111 !important;} html[data-theme="light"] .wave-active::after {mix-blend-mode: multiply !important; opacity: .25 !important; background: radial-gradient(circle at 50% 50%,rgba(80,110,160,.18) 0%,rgba(60,90,130,.1) 30%,transparent 70%) !important;} html[data-theme="dark"] .wave-active::after {mix-blend-mode: overlay !important; opacity: .6 !important; background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 30%,transparent 70%) !important;} .wave-active {position: absolute !important; left: 0; right: 0; top: 0; width: 100%; z-index: 99999; pointer-events: auto; backface-visibility: hidden; will-change: transform; overflow: hidden; border-radius: .5rem; box-shadow: 0 4px 20px rgba(0,0,0,.25); opacity: 0; animation: bannerFadeIn 1.2s ease forwards;} @keyframes bannerFadeIn {from {opacity: 0; transform: translateY(-10px);} to {opacity: 1; transform: translateY(0);}} .wave-active .maint-inner,.wave-active button,.wave-active a {pointer-events: auto !important;} .wave-active .maint-close {position: relative; z-index: 2;} .wave-active {opacity: 1 !important; animation: none !important;} .wave-active {pointer-events: none !important;} .wave-active .maint-inner,.wave-active .maint-close,.wave-active button,.wave-active a {pointer-events: auto !important;} .wave-active .maint-close {position: relative; z-index: 2;} html[data-theme="light"] .wave-active {background: rgba(20,45,85,.28) !important; backdrop-filter: blur(10px) saturate(160%) !important; -webkit-backdrop-filter: blur(10px) saturate(160%) !important; border: 1px solid rgba(0,0,0,.1) !important; color: #111 !important;} html[data-theme="dark"] .wave-active {background: rgba(40,40,40,.45) !important; backdrop-filter: blur(8px) saturate(140%) !important; -webkit-backdrop-filter: blur(8px) saturate(140%) !important; border: 1px solid rgba(255,255,255,.08) !important; color: #fdfdfd !important;} html[data-theme="light"] .wave-active::after {mix-blend-mode: multiply !important; opacity: .25 !important; background: radial-gradient(circle at 50% 50%,rgba(80,110,160,.18) 0%,rgba(60,90,130,.1) 30%,transparent 70%) !important;} html[data-theme="dark"] .wave-active::after {mix-blend-mode: overlay !important; opacity: .6 !important; background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 30%,transparent 70%) !important;} .wave-active[style] {} .maint-close {border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .2s ease,color .2s ease,transform .15s ease;} .maint-close:hover {background: rgba(255,255,255,.1); color: var(--maint-icon);} .maint-close:active {transform: scale(.92);} :root { --admin-bg: #0b1220; --admin-surface: #8b4f45; --admin-card: #0f3545; --admin-border: #2d3748; --admin-muted: #9aa4b2; --admin-text: #e5e7eb; --admin-primary: var(--theme-primary, #4f46e5); --admin-primary-ghost: rgba(79, 70, 229, .15); --admin-success: #10b981; --admin-warning: #f59e0b; --admin-danger: #ef4444; --admin-info: #3b82f6; --admin-focus: rgba(79, 70, 229, .35); --admin-shadow: rgba(0,0,0,.25); } [data-theme="light"] { --admin-bg: #ffffff; --admin-surface: #f7f8fb; --admin-card: #ffffff; --admin-border: #e5e7eb; --admin-muted: #6b7280; --admin-text: #1f2937; --admin-primary-ghost: rgba(79, 70, 229, .1); --admin-shadow: rgba(0,0,0,.08); } body.admin,.admin-scope {background: var(--admin-bg); color: var(--admin-text);} .admin-muted,.muted {color: var(--admin-muted);} .admin-title h1,h1.admin-title {color: var(--admin-text); letter-spacing: .2px;} .card.admin-card {background: var(--admin-card); color: var(--admin-text); border: 1px solid var(--admin-border); border-radius: 1rem; box-shadow: 0 10px 24px -12px var(--admin-shadow); transition: transform .18s ease,box-shadow .18s ease,background .18s ease;} .card.admin-card.hover:hover {transform: translateY(-4px); background: var(--admin-primary); color: var(--admin-text); border-color: transparent; box-shadow: 0 16px 36px -12px rgba(79,70,229,.45);} .card.admin-card h2 {margin: 0 0 .35rem 0; font-weight: 700;} .grid.admin-grid {} .btn {appearance: none; border: 1px solid var(--admin-primary); background: var(--admin-primary); color: #fff; padding: 5px 10px; border-radius: .65rem; font-weight: 600; line-height: 1.1; transition: filter .15s ease,transform .05s ease,background .15s ease,border-color .15s ease; cursor: pointer;} .btn:hover {filter: brightness(1.06);} .btn:active {transform: translateY(1px);} .btn.ghost {background: var(--admin-primary-ghost); color: var(--admin-primary); border-color: transparent;} .btn.small {padding: .4rem .65rem; font-size: .9rem; border-radius: .55rem;} a.link,.link a {color: var(--admin-primary); text-decoration: none; border-bottom: 1px dashed transparent; transition: color .15s ease,border-color .15s ease;} a.link:hover {color: var(--admin-primary); border-color: var(--admin-primary);} .input,input[type="text"],input[type="search"],input[type="email"],input[type="number"],select,textarea {background: var(--admin-surface); color: var(--admin-text); border: 1px solid var(--admin-border); border-radius: .6rem; padding: .55rem .7rem; outline: none; transition: border-color .15s ease,box-shadow .15s ease,background .15s ease;} .input::placeholder,input::placeholder,textarea::placeholder {color: var(--admin-muted);} .input:focus,input:focus,select:focus,textarea:focus {border-color: var(--admin-primary); box-shadow: 0 0 0 .18rem var(--admin-focus);} .filter-bar {background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: .8rem; padding: .8rem; display: flex; align-items: center; gap: .6rem;} .table,table {width: 100%; border-collapse: separate; border-spacing: 0; background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: .8rem; overflow: hidden;} .table thead th,table thead th {background: linear-gradient(0deg,var(--admin-surface),var(--admin-surface)); color: var(--admin-muted); font-weight: 700; text-align: left; border-bottom: 1px solid var(--admin-border); padding: .7rem .8rem; white-space: nowrap;} .table tbody tr,table tbody tr {border-bottom: 1px solid var(--admin-border);} .table tbody tr:hover,table tbody tr:hover td {background: rgba(255,255,255,.02);} .table td,.table th,table td,table th {padding: .7rem .8rem; vertical-align: middle;} .table-toolbar {display: flex; justify-content: space-between; align-items: center; margin: .6rem 0;} .badge {display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; border-radius: .5rem; font-size: .85rem; font-weight: 600; border: 1px solid var(--admin-border); background: var(--admin-surface); color: var(--admin-text);} .badge.success {border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.1); color: var(--admin-success);} .badge.warning {border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.1); color: var(--admin-warning);} .badge.danger {border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.1); color: var(--admin-danger);} .badge.info {border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.1); color: var(--admin-info);} .level-1,.level-info {color: var(--admin-info);} .level-2,.level-warning {color: var(--admin-warning);} .level-3,.level-danger {color: var(--admin-danger);} .pager {display: flex; align-items: center; gap: .75rem; justify-content: flex-end;} .pager .btn.ghost {background: var(--admin-surface); border: 1px solid var(--admin-border); color: var(--admin-text);} .pager .btn.ghost:hover {border-color: var(--admin-primary); color: var(--admin-primary);} .admin-panel,.box {background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: .8rem; padding: 1rem; box-shadow: 0 8px 24px -12px var(--admin-shadow);} .admin-panel .panel-title {font-weight: 700; margin-bottom: .5rem;} .table-actions,.actions {display: inline-flex; align-items: center; gap: .4rem;} .action-link {color: var(--admin-primary); font-weight: 600; text-decoration: none; border-bottom: 1px dashed transparent; transition: color .15s ease,border-color .15s ease;} .action-link:hover {border-color: var(--admin-primary);} .alert {display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border-radius: .65rem; border: 1px solid var(--admin-border); background: var(--admin-surface); color: var(--admin-text);} .alert.info {border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.1);} .alert.success {border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.1);} .alert.warn {border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.1);} .alert.error {border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.1);} hr.admin-sep {border: 0; border-top: 1px solid var(--admin-border); margin: 1rem 0;} code.admin-code {background: var(--admin-surface); border: 1px solid var(--admin-border); padding: .2rem .4rem; border-radius: .35rem; font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; font-size: .9em;} input[type="checkbox"].admin-check {accent-color: var(--admin-primary);} td a.link {border-bottom: 1px dashed transparent;} td a.link:hover {border-color: var(--admin-primary);} @media (max-width: 640px) {.table thead {display: none;} .table tr,table tr {display: grid; border-bottom: 1px solid var(--admin-border); padding: .6rem .4rem;} .table td,table td {padding: .35rem 0;} .pager {justify-content: center;}} .admin-assistant {max-width: 980px; margin: 2rem auto;} .chat-card {display: flex; flex-direction: column; gap: 1.5rem; min-height: 480px;} .chat-header {display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;} .chat-title h1 {margin-bottom: .25rem;} .chat-status {display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; font-size: .8rem; background: rgba(0,200,120,.06); border: 1px solid rgba(0,200,120,.35);} .status-dot {width: .6rem; height: .6rem; border-radius: 999px; background: #00c878; box-shadow: 0 0 8px rgba(0,200,120,.7);} .chat-body {flex: 1; min-height: 260px; max-height: 520px; padding: 1rem; border-radius: .9rem; background: var(--surface-subtle, rgba(0,0,0,.02)); overflow-y: auto;} .chat-empty {text-align: left; display: flex; flex-direction: column; gap: .75rem;} .chat-suggestions {display: flex; flex-wrap: wrap; gap: .5rem;} .chat-suggestions .chip {border: 1px solid rgba(0,0,0,.12); border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; background: transparent; cursor: pointer; transition: background .15s ease,transform .1s ease,box-shadow .1s ease;} .chat-suggestions .chip:hover {background: rgba(0,0,0,.04); transform: translateY(-1px);} .chat-messages {display: flex; flex-direction: column; gap: 1rem;} .chat-row {display: flex; width: 100%;} .chat-row-user {justify-content: flex-end;} .chat-row-ai {justify-content: flex-start;} .chat-bubble {max-width: min(75%,640px); padding: .75rem .9rem; border-radius: 1.1rem; box-shadow: 0 6px 14px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: .35rem; font-size: .9rem;} .chat-bubble-user {background: linear-gradient(135deg,#2563eb,#0ea5e9); color: #fff; border-bottom-right-radius: .3rem;} .chat-bubble-ai {background: #ffffff; border: 1px solid rgba(0,0,0,.07); border-bottom-left-radius: .3rem;} .chat-meta {display: flex; align-items: center; gap: .4rem; font-size: .75rem; opacity: .85;} .chat-author {font-weight: 600;} .chat-tag {padding: .1rem .5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.5); font-size: .7rem;} .chat-tag-ai {border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.03);} .chat-text pre {margin: 0; font-family: inherit; font-size: .9rem; white-space: pre-wrap;} .chat-footer {border-top: 1px solid rgba(0,0,0,.06); padding-top: 1rem;} .chat-form {display: flex; flex-direction: column; gap: .75rem;} .chat-input-wrapper textarea {width: 100%; resize: vertical; min-height: 80px; border-radius: .7rem; border: 1px solid rgba(0,0,0,.14); padding: .7rem .85rem; font-family: inherit; font-size: .9rem;} .chat-input-wrapper textarea:focus {outline: none; border-color: #2563eb; box-shadow: 0 0 0 1px rgba(37,99,235,.35);} .chat-actions {display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;} .chat-actions-left {flex: 1 1 auto; min-width: 200px;} .chat-actions-right {flex: 0 0 auto;} @media (max-width: 768px) {.admin-assistant {margin-top: 1rem;} .chat-body {max-height: 420px;} .chat-bubble {max-width: 100%;}} :root { --surf: color-mix(in oklab, white 86%, transparent); --text-muted: #6c757d; --kpi-1: oklch(70% .12 260); --kpi-2: oklch(76% .14 180); --kpi-3: oklch(78% .12 120); --kpi-4: oklch(78% .12 30); --soft: color-mix(in oklab, currentColor 18%, transparent); } [data-theme="dark"] { --surf: color-mix(in oklab, white 8%, transparent); --text-muted: #9aa0a6; } .bg-surface {background: var(--surf); border: 0;} .kpi-card {position: relative; background: var(--surf); transition: transform .12s ease,box-shadow .12s ease; border: 1px solid color-mix(in oklab,currentColor 8%,transparent);} .kpi-card:hover {transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06);} .kpi-label {font-size: .875rem; color: var(--text-muted);} .kpi-value {font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: .5px;} .kpi-link {font-size: .875rem; color: inherit; opacity: .7;} .kpi-link:hover {opacity: 1;} .kpi-icon {width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--soft);} .kpi-icon.kpi-1 {color: var(--kpi-1);} .kpi-icon.kpi-2 {color: var(--kpi-2);} .kpi-icon.kpi-3 {color: var(--kpi-3);} .kpi-icon.kpi-4 {color: var(--kpi-4);} .dashboard-table thead th {border-bottom: 0; color: var(--text-muted); font-weight: 600;} .dashboard-table tbody tr + tr td {border-top-color: color-mix(in oklab,currentColor 10%,transparent);} .badge.bg-soft {background: color-mix(in oklab,currentColor 12%,transparent); color: inherit; border: 1px solid color-mix(in oklab,currentColor 16%,transparent);} .card-header {border-bottom: 1px solid color-mix(in oklab,currentColor 10%,transparent);} :root { --bg: #ffffff; --bg-soft: #f5f7fb; --text: #111827; --muted: #6b7280; --primary: #2563eb; --border: #e5e7eb; --table-stripe: #f9fafb; --code-bg: #f3f4f6; } :root[data-theme="dark"],body[data-theme="dark"] { --bg: #0f172a; --bg-soft: #111827; --text: #e5e7eb; --muted: #9ca3af; --primary: #3b82f6; --border: #1f2937; --table-stripe: #0b1220; --code-bg: #0b1220; } .audit-logs-page {margin-top: 2rem; color: var(--text); background: var(--bg);} .audit-logs-page h1 {margin-bottom: 1rem;} .audit-filter {display: grid; grid-template-columns: 1fr auto; gap: .75rem; margin: 1rem 0 1.5rem;} .audit-filter .input {padding: .65rem .9rem; border-radius: .75rem; border: 1px solid var(--border); background: var(--bg); color: var(--text);} .audit-filter .input::placeholder {color: var(--muted);} .audit-filter .btn {padding: .65rem 1rem; border-radius: .75rem; border: 1px solid var(--primary); background: var(--primary); color: #fff; cursor: pointer;} .audit-filter .btn:hover {filter: brightness(1.05);} .table-responsive {border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; background: var(--bg);} .table.audit-table {width: 100%; border-collapse: collapse; background: var(--bg); color: var(--text);} .table.audit-table thead th {text-align: left; font-weight: 600; padding: .85rem; border-bottom: 1px solid var(--border); background: var(--bg-soft);} .table.audit-table tbody td {padding: .85rem; border-bottom: 1px solid var(--border); vertical-align: top;} .table.audit-table tbody tr:nth-child(odd) {background: var(--table-stripe);} .audit-details summary {cursor: pointer; color: var(--primary); margin-bottom: .25rem;} .audit-details pre {white-space: pre-wrap; word-break: break-word; background: var(--code-bg); border: 1px solid var(--border); border-radius: .5rem; padding: .5rem .75rem; margin: .25rem 0 .5rem; font-size: .9rem;} .audit-pagination {display: flex; gap: .75rem; align-items: center; justify-content: center; margin: 1rem 0 0; color: var(--text);} .audit-pagination .btn {padding: .6rem .9rem; border-radius: .6rem; border: 1px solid var(--border); background: var(--bg); color: var(--text);} .audit-pagination .btn:hover {border-color: var(--primary);} @media (max-width: 720px) {.audit-filter {grid-template-columns: 1fr;} .table.audit-table thead {display: none;} .table.audit-table tbody td {display: block; padding: .6rem .4rem;} .table.audit-table tbody tr {border-bottom: 1px solid var(--border); padding: .5rem .6rem;}} :root{ --bg: #ef4444; --text: #e6f1ff; --fg: #e6f1ff; --muted: #96a2b4; --card: rgba(255,255,255,.04); --border: rgba(255,255,255,.14); --glass: rgba(255,255,255,.06); --primary: #10bce0; --primary-contrast: #0b1020; --ring: rgba(16,188,224,.35); --shadow: 0 16px 36px rgba(0,0,0,.45); --shadow-hover: 0 22px 60px rgba(0,0,0,.55); } html[data-theme="light"]{ --bg: #f5f7fb; --text: #0b1020; --fg: #0b1020; --muted: #5b6475; --card: #ffffff; --border: #e4e8f1; --glass: rgba(0,0,0,.04); --primary: #1662ff; --primary-contrast: #ffffff; --ring: rgba(22,98,255,.25); --shadow: 0 10px 24px rgba(0,0,0,.08); --shadow-hover: 0 18px 32px rgba(0,0,0,.14); } :root{ --maint-bg: rgba(16,188,224,.1); --maint-border: rgba(16,188,224,.42); --maint-text: #0b3b4a; --maint-icon: #10bce0; --maint-glow: rgba(16,188,224,.18); --maint-shadow: 0 10px 28px rgba(0,0,0,.22); } [data-theme="dark"]{ --maint-bg: rgba(16,188,224,.07); --maint-border: rgba(16,188,224,.3); --maint-text: #b9ecf6; --maint-icon: #6ee7f9; --maint-glow: rgba(16,188,224,.14); --maint-shadow: 0 10px 32px rgba(0,0,0,.4); } :root { --bg: #f9fafb; --text: #111827; --muted: #6b7280; --card-bg: #ffffff; --line: rgba(17, 24, 39, .08); --primary: #10bce0; --primary-hi: #13c9f0; --primary-lo: #0ba7c7; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #7c4dff; --surface: rgba(255, 255, 255, .8); --surface-2: rgba(255, 255, 255, .6); --shadow: 0 4px 18px rgba(2, 6, 23, .08); --shadow-strong: 0 6px 26px rgba(2, 6, 23, .16); --ring: 0 0 0 3px rgba(16, 188, 224, .25); } [data-theme="dark"] { --bg: #0b1020; --text: #e6f1ff; --muted: #96a2b4; --card-bg: rgba(255,255,255,.05); --line: rgba(230, 241, 255, .08); --primary: #10bce0; --primary-hi: #44d6f2; --primary-lo: #0fa9c8; --success: #22d87b; --warning: #f5b31b; --danger: #ff6767; --info: #9a7eff; --surface: rgba(255, 255, 255, .06); --surface-2: rgba(255, 255, 255, .04); --shadow: 0 6px 22px rgba(0,0,0,.35); --shadow-strong: 0 10px 30px rgba(0,0,0,.5); --ring: 0 0 0 3px rgba(16, 188, 224, .35); } button,.btn {color: var(--text); background-color: var(--surface); border: 1px solid var(--line); border-radius: inherit; box-shadow: var(--shadow); transition: background-color .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease,transform .06s ease;} button:hover,.btn:hover {background-color: var(--surface-2); border-color: color-mix(in oklab,var(--line),var(--text) 10%); box-shadow: var(--shadow-strong);} button:active,.btn:active {transform: translateY(1px);} button:focus-visible,.btn:focus-visible {outline: none; box-shadow: var(--shadow-strong),var(--ring);} .btn-primary,button.btn-primary,button[type="submit"],input[type="submit"].btn,a.btn-primary {color: #ffffff; background: linear-gradient(90deg,var(--primary),var(--info)); border-color: transparent; box-shadow: 0 6px 20px rgba(16,188,224,.35);} .btn-primary:hover,button.btn-primary:hover,button[type="submit"]:hover,input[type="submit"].btn:hover,a.btn-primary:hover {filter: brightness(1.05); box-shadow: 0 10px 26px rgba(16,188,224,.45);} .btn-primary:disabled,button.btn-primary:disabled,button[type="submit"]:disabled,input[type="submit"].btn:disabled,a.btn-primary.disabled {opacity: .65; filter: none; box-shadow: none;} .btn-outline,a.btn-outline,button.btn-outline {color: var(--primary); background-color: transparent; border-color: color-mix(in oklab,var(--primary),#0000 60%); box-shadow: none;} .btn-outline:hover,a.btn-outline:hover,button.btn-outline:hover {background: color-mix(in oklab,var(--primary),var(--bg) 85%); color: color-mix(in oklab,var(--primary),#ffffff 20%); border-color: var(--primary);} .btn-ghost,a.btn-ghost,button.btn-ghost {background: transparent; color: var(--text); border-color: transparent; box-shadow: none;} .btn-ghost:hover,a.btn-ghost:hover,button.btn-ghost:hover {background: color-mix(in oklab,var(--primary),var(--bg) 92%);} .btn-success {background: linear-gradient(90deg,var(--success),color-mix(in oklab,var(--success),#000 10%)); color: #fff; border-color: transparent;} .btn-warning {background: linear-gradient(90deg,var(--warning),color-mix(in oklab,var(--warning),#000 10%)); color: #111827; border-color: transparent;} .btn-danger {background: linear-gradient(90deg,var(--danger),color-mix(in oklab,var(--danger),#000 10%)); color: #fff; border-color: transparent;} .btn-success:hover,.btn-warning:hover,.btn-danger:hover {filter: brightness(1.06);} .btn:disabled,button:disabled,.btn.disabled {opacity: .6; cursor: not-allowed; box-shadow: none;} .badge {display: inline-block; color: var(--text); background: color-mix(in oklab,var(--text),var(--bg) 92%); border: 1px solid var(--line); border-radius: inherit; box-shadow: none;} .badge-primary {color: #0b1f2a; background: color-mix(in oklab,var(--primary),var(--bg) 80%); border-color: color-mix(in oklab,var(--primary),#0000 60%);} .badge-success {color: #06240f; background: color-mix(in oklab,var(--success),var(--bg) 82%); border-color: color-mix(in oklab,var(--success),#0000 60%);} .badge-warning {color: #2b1c00; background: color-mix(in oklab,var(--warning),var(--bg) 78%); border-color: color-mix(in oklab,var(--warning),#0000 55%);} .badge-danger {color: #2a0b0b; background: color-mix(in oklab,var(--danger),var(--bg) 82%); border-color: color-mix(in oklab,var(--danger),#0000 60%);} .badge-info {color: #0f0e29; background: color-mix(in oklab,var(--info),var(--bg) 80%); border-color: color-mix(in oklab,var(--info),#0000 60%);} .badge[data-dot]::before {content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .4em; border-radius: 999px; background: currentColor; box-shadow: 0 0 8px currentColor;} .alert {color: var(--text); background: color-mix(in oklab,var(--text),var(--bg) 95%); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: inherit; box-shadow: var(--shadow);} .alert a {color: var(--primary);} .alert a:hover {text-decoration: underline;} .alert-primary {background: color-mix(in oklab,var(--primary),var(--bg) 92%); border-color: color-mix(in oklab,var(--primary),#0000 60%); border-left-color: var(--primary); color: color-mix(in oklab,var(--primary),#000 40%);} .alert-success {background: color-mix(in oklab,var(--success),var(--bg) 92%); border-color: color-mix(in oklab,var(--success),#0000 60%); border-left-color: var(--success); color: color-mix(in oklab,var(--success),#000 45%);} .alert-warning {background: color-mix(in oklab,var(--warning),var(--bg) 90%); border-color: color-mix(in oklab,var(--warning),#0000 55%); border-left-color: var(--warning); color: color-mix(in oklab,var(--warning),#000 55%);} .alert-danger {background: color-mix(in oklab,var(--danger),var(--bg) 92%); border-color: color-mix(in oklab,var(--danger),#0000 60%); border-left-color: var(--danger); color: color-mix(in oklab,var(--danger),#000 45%);} .alert-info {background: color-mix(in oklab,var(--info),var(--bg) 92%); border-color: color-mix(in oklab,var(--info),#0000 60%); border-left-color: var(--info); color: color-mix(in oklab,var(--info),#000 40%);} .alert .close,.alert .btn-close {color: inherit; background: transparent; border: 1px solid transparent;} .alert .close:hover,.alert .btn-close:hover {border-color: currentColor; background: color-mix(in oklab,currentColor,var(--bg) 85%);} input[type="text"],input[type="email"],input[type="password"],input[type="search"],select,textarea {color: var(--text); background: var(--card-bg); border: 1px solid var(--line); box-shadow: none;} input:focus,select:focus,textarea:focus {outline: none; box-shadow: var(--ring); border-color: color-mix(in oklab,var(--primary),#0000 40%);} :root { --bg: #ffffff; --text: #111111; --muted: #666666; --card: #f7f7f8; --border: #e6e6e8; --primary: #2563eb; --primary-contrast: #ffffff; } :root[data-theme="dark"] { --bg: #0b0c10; --text: #eaeaea; --muted: #a3a3a3; --card: #15171c; --border: #26292f; --primary: #60a5fa; --primary-contrast: #0b0c10; } html,body {background: var(--bg); color: var(--text);} .navbar {background: var(--card); border-bottom: 1px solid var(--border);} .brand {color: var(--text); text-decoration: none;} a {color: var(--primary);} .card {background: var(--card); border: 1px solid var(--border); border-radius: 12px;} .icon-btn {appearance: none; border: 1px solid var(--border); background: var(--card); color: var(--text); padding: .5rem .75rem; border-radius: 12px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center;} .icon-btn:hover {filter: brightness(1.05);} :root[data-theme="dark"] img {opacity: .98;} html[data-theme="light"] body,body[data-theme="light"] {background: #f5f7fb !important; color: #0b1020 !important;} html[data-theme="dark"] body,body[data-theme="dark"] {background: #0b1020 !important; color: #e6f1ff !important;} body {background-image: none !important;}}}