:root{font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;color:#18324a;background:#f4f9fd;--navy:#082f49;--blue:#0284c7;--blue-dark:#0369a1;--blue-pale:#e0f2fe;--line:#d9e8f2;--muted:#62788b;--shadow:0 10px 30px rgba(14,75,110,.07)}
html{scroll-behavior:smooth}body{min-height:100vh;background-color:#f4f9fd;background-image:linear-gradient(rgba(14,165,233,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.025) 1px,transparent 1px),radial-gradient(circle at 90% 5%,rgba(56,189,248,.1),transparent 28%);background-size:32px 32px,32px 32px,auto;color:#18324a}
.topbar{height:68px;padding:0 26px;background:rgba(8,47,73,.96);border-bottom:1px solid rgba(125,211,252,.22);box-shadow:0 4px 20px rgba(8,47,73,.12);backdrop-filter:blur(12px)}.brand{font-weight:750;letter-spacing:.01em}.brand::before{content:"◇";color:#38bdf8;margin-right:10px;font-size:1.15em}.userbox{color:#d8effc}.userbox form{margin:0}
.layout{grid-template-columns:232px minmax(0,1fr);min-height:calc(100vh - 108px)}.sidebar{padding:22px 14px;background:rgba(255,255,255,.82);border-color:var(--line);backdrop-filter:blur(10px)}.sidebar nav{gap:6px}.sidebar a{position:relative;border-radius:9px;color:#496579;transition:.18s}.sidebar a:hover{background:#f0f9ff;color:var(--blue-dark);transform:translateX(2px)}.sidebar a.active{background:var(--blue-pale);color:var(--navy);box-shadow:inset 3px 0 #0ea5e9}
.content{padding:28px}.card{padding:20px;border-color:var(--line);border-radius:14px;background:rgba(255,255,255,.94);box-shadow:var(--shadow)}.metric{position:relative;overflow:hidden;min-height:116px}.metric::after{content:"";position:absolute;width:64px;height:64px;right:-20px;top:-20px;border:12px solid var(--blue-pale);border-radius:50%}.metric strong{color:var(--blue-dark);font-size:1.9rem;letter-spacing:-.03em}.metric span,.text-muted,.help{color:var(--muted)}
.hero{padding:74px 20px 60px}.hero::before{content:"STOCK MANAGEMENT SYSTEM";display:inline-block;margin-bottom:16px;padding:6px 11px;color:var(--blue-dark);background:var(--blue-pale);border:1px solid #bae6fd;border-radius:999px;font-size:.72rem;font-weight:750;letter-spacing:.12em}.hero h1{font-size:clamp(2rem,5vw,3.1rem);color:var(--navy);letter-spacing:-.04em}.hero p{color:#587084}h1{color:var(--navy);letter-spacing:-.025em}h2{color:#174965}p{line-height:1.65}
.btn{border:1px solid transparent;border-radius:9px;background:var(--blue);box-shadow:0 5px 14px rgba(2,132,199,.18);transition:.18s}.btn:hover{filter:none;background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 7px 18px rgba(2,132,199,.23)}.btn-secondary{background:#536d80;box-shadow:none}.btn-danger{background:#dc4254;box-shadow:none}.btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25);box-shadow:none}.btn-light:hover{background:rgba(255,255,255,.18)}
.table-wrap{border:1px solid #e1edf4;border-radius:10px}table{background:transparent}th,td{padding:11px 12px;border-color:#e4eef5}th{background:#f0f9ff;color:#315b73;font-size:.84rem}tbody tr{transition:background .15s}tbody tr:hover{background:#f7fbfe}tbody tr:last-child td{border-bottom:0}label{color:#35576d;font-size:.9rem}input,select,textarea{border-color:#c9dce9;border-radius:9px;background:#fbfdff;color:#18324a;outline:none;transition:.18s}input:hover,select:hover,textarea:hover{border-color:#91c7e5}input:focus,select:focus,textarea:focus{border-color:#0ea5e9;background:#fff;box-shadow:0 0 0 3px rgba(14,165,233,.12)}textarea{resize:vertical}
.alert{border:1px solid transparent;border-radius:9px}.alert.success{background:#ecfdf5;border-color:#bbf7d0}.alert.error{background:#fff1f2;border-color:#fecdd3;color:#9f1239}.alert.warning{background:#fffbeb;border-color:#fde68a}.badge{background:var(--blue-pale);color:var(--navy);font-weight:650}.text-danger{color:#c92e43;font-weight:650}.login-card{margin:70px auto;padding:28px;border-top:3px solid #0ea5e9}.code{background:#f0f9ff;color:var(--navy)}.footer{color:#7890a2}
.sale-hero{padding:22px 24px;margin-bottom:18px;color:#fff;background:#075985!important;box-shadow:none!important;overflow-wrap:anywhere}.sale-hero h1{margin:0 0 8px;color:#fff;font-size:1.6rem;font-weight:750;line-height:1.5;letter-spacing:0}.sale-hero p{margin:0;color:#fff!important;font-size:1rem;line-height:1.75;letter-spacing:0}.content>.card form>h2{background:#f0f9ff!important;border-color:#d9e8f2!important;color:#0c4a6e!important}.form-row-4:focus-within{border-color:#38bdf8!important;box-shadow:0 0 0 3px rgba(14,165,233,.1)!important}.content>.card form>.btn{box-shadow:0 8px 18px rgba(2,132,199,.2)!important}
@media(max-width:900px){.sidebar{padding:10px 12px;border-color:var(--line)}.sidebar a.active{box-shadow:inset 0 -3px #0ea5e9}.content{padding:20px 16px}}@media(max-width:560px){.topbar{height:62px;padding:0 14px}.brand{font-size:.92rem}.brand::before{margin-right:6px}.hero{padding:52px 4px 40px}.card{padding:16px;border-radius:12px}.login-card{margin:35px auto;padding:22px}}