:root { --ink:#1d1a2b; --muted:#716d80; --brand:#6647e8; --brand-dark:#4828bc; --mint:#48d5b0; --paper:#fff; --line:#e8e6ef; --surface:#f7f6fb; }
html, body { min-height:100%; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:radial-gradient(circle at 72% -10%,#e5e0ff 0,transparent 29rem),var(--surface); color:var(--ink); }
body { line-height:1.5; } h1,h2,h3 { font-weight:800; letter-spacing:-.035em; } h1 { font-size:clamp(2rem,4vw,3.5rem); } h2 { font-size:1.35rem; } p { color:var(--muted); } a { color:var(--brand-dark); font-weight:700; text-decoration:none; } a:hover { color:var(--brand); }
button,.btn { display:inline-flex; justify-content:center; align-items:center; gap:.55rem; border:0; border-radius:.8rem; background:linear-gradient(135deg,var(--brand),#8668fa); box-shadow:0 9px 18px #6040ca33; color:#fff !important; font-weight:800; padding:.78rem 1.1rem; cursor:pointer; transition:transform .2s,box-shadow .2s; } button:hover,.btn:hover { transform:translateY(-2px); box-shadow:0 12px 25px #6040ca44; } button:disabled { background:#aaa6b5; box-shadow:none; cursor:not-allowed; transform:none; }.secondary { background:#eeeafc; color:var(--brand-dark) !important; box-shadow:none; }
.muted { color:var(--muted); }.eyebrow,.tag { color:var(--brand); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:900; margin:0 0 .35rem; }.hero,.admin-hero { position:relative; overflow:hidden; margin:0 0 1.5rem; padding:clamp(2rem,5vw,4rem); border-radius:1.5rem; color:#fff; background:linear-gradient(120deg,#27204e,#6848de); box-shadow:0 20px 40px #37236a2e; }.hero:after,.admin-hero:after { content:""; position:absolute; width:18rem;height:18rem; border:2rem solid #ffffff14; border-radius:50%; right:-6rem; top:-8rem; }.hero h1,.hero p,.admin-hero h1,.admin-hero p { color:#fff; position:relative; z-index:1; }.hero .eyebrow { color:#c9baff; }
.catalog-tools,.form-grid { display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin:1rem 0 1.5rem; }.form-grid.compact { margin:.2rem 0; }.form-grid.three { grid-template-columns:repeat(3,1fr); }
input,select,textarea,.catalog-tools input,.catalog-tools select { width:100%; padding:.8rem .9rem; border:1px solid var(--line); border-radius:.75rem; background:#fff; color:var(--ink); outline:none; transition:border-color .2s,box-shadow .2s; } input:focus,select:focus,textarea:focus { border-color:#9a86ef; box-shadow:0 0 0 4px #7456e51c; }.auth-card label,.form-grid label { display:grid; gap:.4rem; color:#373245; font-size:.9rem; font-weight:750; }.form-grid textarea { min-height:6rem; resize:vertical; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.2rem; }.product-card { overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:1.1rem; box-shadow:0 6px 20px #2b24350d; transition:transform .2s,box-shadow .2s; }.product-card:hover { transform:translateY(-4px); box-shadow:0 16px 32px #2b24351c; }.product-card img,.image-placeholder { width:100%; height:210px; object-fit:cover; background:#ede9ff; display:grid; place-items:center; color:#696577; }.product-body { padding:1.1rem; display:grid; gap:.65rem; }.product-body h2,.product-body p { margin:0; }.product-body small { color:var(--muted); }.tag { color:#5c3fc8; background:#f0edff; width:max-content; padding:.22rem .5rem; border-radius:999px; }
.alerta { margin:1rem 0; padding:.85rem 1rem; border-radius:.75rem; background:#f1edff; border:1px solid #ded5ff; color:#4b2bb5; font-weight:650; }.cart-list,.admin-table { background:#fff; border:1px solid var(--line); border-radius:1rem; overflow:hidden; box-shadow:0 8px 22px #2b24330a; }.cart-line,.admin-table>div { display:flex; gap:1rem; align-items:center; padding:1rem 1.15rem; border-bottom:1px solid var(--line); }.admin-table>div:last-child { border-bottom:0; }.cart-line span,.admin-table span:first-child { flex:1; }.cart-line input { width:5rem; }.cart-total { padding:1rem 0; font-size:1.2rem; font-weight:800; }
.auth-shell { min-height:calc(100vh - 8rem); display:grid; place-items:center; padding:2rem 0; }.auth-card { width:min(100%,460px); padding:clamp(1.5rem,5vw,2.5rem); background:#fffffff2; border:1px solid #e7e2f6; border-radius:1.4rem; box-shadow:0 20px 50px #26144a18; backdrop-filter:blur(12px); }.auth-card-wide { width:min(100%,540px); }.auth-card h1,.auth-card h2 { margin:.1rem 0 .45rem; }.auth-card form { display:grid; gap:1rem; margin-top:1.5rem; }.auth-card form button { width:100%; margin-top:.25rem; }.auth-icon { display:grid; place-items:center; width:2.75rem; height:2.75rem; margin-bottom:1.2rem; border-radius:.9rem; background:linear-gradient(135deg,#7759ee,#b4a4ff); color:#fff; font-size:1.25rem; box-shadow:0 8px 18px #6243d33d; }.auth-footer { margin:1.4rem 0 0; text-align:center; font-size:.92rem; }
.payment-shell { min-height:calc(100vh - 8rem); display:grid; grid-template-columns:minmax(230px,.8fr) minmax(320px,460px); justify-content:center; align-items:center; gap:clamp(2rem,8vw,7rem); padding:2rem 0; }.payment-summary { max-width:360px; }.payment-summary h1 { margin:.1rem 0 .6rem; }.payment-mark { color:var(--mint); font-size:5rem; line-height:.8; font-weight:300; }.secure-note { display:flex; align-items:center; gap:.6rem; margin-top:1.8rem; color:#524b61; font-weight:700; }.secure-note span { display:grid; place-items:center; width:1.4rem; height:1.4rem; background:#dcfff5; color:#168566; border-radius:50%; }.payment-card { margin:0; }.payment-card h2 { font-size:1.7rem; }
.invoice { max-width:900px; margin:1rem auto; padding:clamp(1.25rem,4vw,3rem); background:#fff; border:1px solid var(--line); border-radius:1.35rem; box-shadow:0 18px 45px #24153c14; }.invoice-head { display:flex; justify-content:space-between; gap:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }.invoice-head h1 { margin:0; font-size:2rem; }.invoice-head h1 span { color:var(--brand); }.invoice-head p { margin:.35rem 0 0; }.invoice-meta { display:grid; justify-items:end; align-content:start; gap:.35rem; text-align:right; }.status-pill { padding:.28rem .65rem; border-radius:999px; background:#ddfff4; color:#168566; font-size:.75rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }.invoice-table-wrap { overflow-x:auto; }.invoice table { width:100%; min-width:520px; border-collapse:collapse; margin-top:1rem; }.invoice th { color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }.invoice th,.invoice td { padding:1rem .7rem; text-align:left; border-bottom:1px solid var(--line); }.invoice th:first-child,.invoice td:first-child { padding-left:0; }.invoice th:last-child,.invoice td:last-child { text-align:right; padding-right:0; }.invoice-totals { margin:1.4rem 0 0 auto; max-width:320px; display:grid; gap:.7rem; }.invoice-totals span { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); }.invoice-totals strong { color:var(--ink); }.grand-total { margin-top:.2rem; padding-top:1rem; border-top:2px solid var(--ink); font-size:1.22rem; font-weight:800; }.invoice-actions { max-width:900px; margin:1rem auto; display:flex; justify-content:flex-end; gap:.7rem; }
.content { padding-top:2rem !important; padding-bottom:3rem; }.logout { width:100%; text-align:left; background:transparent; border-radius:0; box-shadow:none; }.logout:hover { transform:none; box-shadow:none; }
.valid.modified:not([type=checkbox]) { outline:1px solid #26b050; }.invalid { outline:1px solid #e50000; }.validation-message { color:#c52222; }.blazor-error-boundary { background:#b32121; padding:1rem; color:#fff; }
@media (max-width:700px) { .content { padding-left:1rem !important; padding-right:1rem !important; }.payment-shell { grid-template-columns:1fr; padding:1.5rem 0; }.payment-summary { max-width:none; }.form-grid.three { grid-template-columns:1fr; }.invoice-head { flex-direction:column; }.invoice-meta { justify-items:start; text-align:left; }.invoice-actions { justify-content:stretch; }.invoice-actions>* { flex:1; } .cart-line,.admin-table>div { flex-wrap:wrap; } }
@media print { html,body { background:#fff; }.sidebar,.top-row,.no-print { display:none !important; }.content { padding:0 !important; }.invoice { box-shadow:none; border:0; margin:0; max-width:none; } }