:root{--navy:#102a43;--navy2:#173f5f;--gold:#c8952e;--gold2:#e7bd62;--cream:#f7f4ed;--paper:#fff;--ink:#16222e;--muted:#64748b;--line:#dbe3ea;--green:#17845a;--red:#c33d43;--blue:#2563a6;--shadow:0 16px 50px rgba(16,42,67,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f8fafc;font-family:Tahoma,'Leelawadee UI',sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(1160px,calc(100% - 40px));margin:auto}.narrow{width:min(860px,calc(100% - 40px))}.utility{background:var(--navy);color:#d8e4ec;font-size:.82rem}.utility .container{display:flex;justify-content:space-between;padding:6px 0}.brand-row{display:flex;align-items:center;justify-content:space-between;min-height:88px}.site-header{background:#fff;border-bottom:1px solid #e6edf2;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:13px}.brand strong{display:block;color:var(--navy);font-size:1.1rem}.brand small{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.03em}.emblem{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;background:linear-gradient(145deg,var(--gold2),#ac761c);border:4px double #fff;box-shadow:0 0 0 1px var(--gold)}.emblem.small{width:42px;height:42px}.brand-row nav{display:flex;gap:28px;font-size:.92rem;font-weight:600;color:#334e68}.brand-row nav a{padding:30px 0;border-bottom:3px solid transparent}.brand-row nav a:hover{color:var(--gold);border-color:var(--gold)}
.hero{color:#fff;background:radial-gradient(circle at 78% 25%,rgba(231,189,98,.2),transparent 24%),linear-gradient(120deg,#0d263d,#173f5f);padding:88px 0 94px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.15fr .75fr;gap:72px;align-items:center}.eyebrow{display:inline-block;color:var(--gold2);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}.eyebrow.dark{color:#9a6b16}.hero h1{font-size:clamp(2.5rem,5.2vw,4.5rem);line-height:1.13;margin:0 0 22px;letter-spacing:-.04em}.hero h1 em{font-style:normal;color:var(--gold2)}.hero p{font-size:1.14rem;color:#d8e4ec;max-width:650px}.hero-actions{display:flex;gap:12px;margin-top:34px}.btn{display:inline-flex;justify-content:center;align-items:center;border:1px solid transparent;border-radius:7px;padding:10px 18px;font-weight:600;transition:.2s;white-space:nowrap}.btn:hover{transform:translateY(-1px);filter:brightness(.97)}.btn-primary{background:var(--gold);border-color:var(--gold);color:#fff}.btn-dark{background:var(--navy);color:#fff}.btn-light{background:#fff;color:var(--navy)}.btn-outline{border-color:#9fb3c5;color:var(--navy);background:transparent}.admin-header .btn-outline{color:#fff;border-color:#6f8ca1}.btn-ghost{color:var(--muted)}.btn-lg{padding:13px 25px}.btn-sm{padding:6px 12px;font-size:.83rem}.btn-block{width:100%}.hero-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(8px);padding:38px;border-radius:12px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.2)}.seal{margin:auto;display:grid;place-items:center;width:90px;height:90px;border:1px solid var(--gold2);border-radius:50%;font-size:2rem;color:var(--gold2);box-shadow:inset 0 0 0 7px rgba(231,189,98,.08)}.hero-card h2{margin:20px 0 5px}.hero-card p{font-size:.96rem}.trust-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:.78rem;color:#d9e7ef;margin-top:24px}
.section{padding:76px 0}.section-heading{text-align:center;margin-bottom:40px}.section-heading span{color:var(--gold);font-weight:700;font-size:.83rem}.section-heading h2{font-size:2rem;margin:5px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps article{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);padding:28px;border-radius:8px}.steps b{color:var(--gold);font-size:1.6rem}.steps h3{margin:8px 0}.steps p{color:var(--muted);margin:0}.notice-section{background:var(--cream);padding:52px 0}.notice{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}.notice h2{margin:0}.notice ul{margin:0;padding-left:20px}.notice li{margin:8px 0}footer{background:#0a2237;color:#c5d3de;padding-top:44px}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.footer-grid p{color:#94aabe}.copyright{text-align:center;border-top:1px solid #28455b;padding:13px;margin-top:30px;font-size:.78rem;color:#8299aa}
.page-hero{background:linear-gradient(120deg,#102a43,#1b4a6d);padding:48px 0;color:#fff}.page-hero h1{font-size:2.4rem;margin:0}.page-hero p{margin:5px 0;color:#cadae4}.form-section{background:#eef3f6}.complaint-form{display:grid;gap:22px}.form-card,.admin-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px;box-shadow:0 5px 20px rgba(16,42,67,.04)}.card-title{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}.card-title>span{display:grid;place-items:center;background:var(--navy);color:#fff;width:35px;height:35px;border-radius:50%;font-weight:700}.card-title h2{font-size:1.2rem;margin:0}.card-title p{font-size:.86rem;color:var(--muted);margin:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-weight:600;font-size:.9rem;margin-bottom:18px}input,select,textarea{width:100%;margin-top:7px;padding:11px 12px;border:1px solid #bdcbd6;border-radius:6px;background:#fff;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,149,46,.14)}textarea{resize:vertical}.field-error{display:block;color:var(--red);margin-top:4px}.counter,label>small{display:block;color:var(--muted);font-weight:400;font-size:.78rem;margin-top:4px}.upload-box{border:2px dashed #aebfcb;border-radius:9px;padding:32px;text-align:center;background:#f8fafc;cursor:pointer}.upload-box input{display:none}.upload-box b,.upload-box span{display:block}.upload-box b{color:var(--navy)}.upload-box span{font-size:.8rem;color:var(--muted)}.preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.preview-grid figure{margin:10px 0 0}.preview-grid img{width:100%;height:100px;object-fit:cover;border-radius:6px}.preview-grid figcaption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}.check-line{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);padding:13px;border-radius:6px;background:#f8fafc}.check-line input{width:auto;margin:5px 0 0}.check-line span{font-weight:400}.check-line b,.check-line small{display:block}.consent{background:#fff7e6;border:1px solid #e8d3a2;border-radius:8px;padding:8px}.consent .check-line{border:0;background:none;margin:0}.alert{padding:13px 16px;border-radius:7px;margin:18px 0}.alert-error{background:#fff0f0;border:1px solid #f0b8bb;color:#9f2930}.alert-success{background:#eaf8f1;border:1px solid #a9dbc5;color:#126a48}
.track-wrap{width:min(760px,calc(100% - 40px))}.track-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;background:#fff;padding:24px;border:1px solid var(--line);border-radius:9px}.track-form label{margin:0}.track-form .btn{margin-bottom:0;height:47px}.success-ticket{text-align:center;background:#effaf5;border:1px solid #a9dbc5;border-radius:12px;padding:34px;margin-bottom:25px}.success-icon{display:grid;place-items:center;width:50px;height:50px;margin:auto;border-radius:50%;background:var(--green);color:#fff;font-size:1.5rem}.success-ticket h2{margin:12px 0 0}.success-ticket p{margin:3px;color:var(--muted)}.success-ticket strong{display:block;color:var(--navy);font-size:1.55rem;letter-spacing:.06em;margin:15px}.copy-btn{border:0;background:none;color:var(--blue);font-weight:600}.status-card{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px}.status-head,.card-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}.status-head span:first-child{font-size:.8rem;color:var(--muted)}.status-head h2{margin:0}.badge{display:inline-block;border-radius:99px;padding:4px 10px;font-size:.76rem;font-weight:600;white-space:nowrap}.badge-received{background:#e9f2fb;color:#245b85}.badge-reviewing,.badge-assigned{background:#fff3d6;color:#8b5e0a}.badge-processing{background:#e6f0ff;color:#2459a1}.badge-resolved{background:#e4f7ed;color:#13704b}.badge-rejected{background:#fde9ea;color:#a42d34}.badge-lg{padding:7px 15px;font-size:.85rem}.details-list>div,.admin-details>div{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid #edf1f4;padding:13px 0}.details-list dt,.admin-details dt{color:var(--muted)}.details-list dd,.admin-details dd{margin:0}.resolution{background:#f0f7fa;border-left:4px solid var(--blue);padding:16px;margin:20px 0}.resolution p{margin:4px 0}.timeline h3{font-size:1rem}.timeline-item{display:grid;grid-template-columns:18px 1fr;gap:10px;position:relative;padding-bottom:18px}.timeline-item>span{width:11px;height:11px;background:var(--gold);border-radius:50%;margin-top:7px}.timeline-item:after{content:'';position:absolute;left:5px;top:18px;bottom:0;border-left:1px solid var(--line)}.timeline-item p{margin:3px 0}.timeline-item small{color:var(--muted)}
.auth-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top right,rgba(231,189,98,.2),transparent 30%),var(--navy)}.auth-wrap{width:min(420px,calc(100% - 30px))}.auth-brand{justify-content:center;color:#fff;margin-bottom:22px}.auth-brand strong{color:#fff}.auth-brand small{color:#b7c8d5}.login-card{background:#fff;padding:34px;border-radius:12px;box-shadow:0 25px 80px rgba(0,0,0,.3)}.login-card h1{margin:0}.login-card p{color:var(--muted);margin-top:0}.back-link{display:inline-block;color:var(--blue);font-size:.87rem;margin-top:16px}.admin-body{background:#eef2f5}.admin-header{height:68px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:5}.admin-logo{display:flex;align-items:center;gap:10px}.admin-logo small{display:block;color:#a9bdcb;font-size:.72rem}.admin-user,.admin-user form{display:flex;align-items:center;gap:15px;margin:0}.admin-shell{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 68px)}.admin-shell>aside{background:#fff;border-right:1px solid var(--line);padding:22px 12px}.admin-shell>aside a{display:block;padding:11px 13px;border-radius:6px;margin:3px;color:#476278;font-size:.9rem}.admin-shell>aside a.active{background:#eaf0f4;color:var(--navy);font-weight:700}.admin-main{padding:30px;min-width:0}.admin-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.admin-title p{color:var(--muted);margin:0}.admin-title h1{margin:0;font-size:1.65rem}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}.stats-grid>div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;border-left:4px solid var(--gold)}.stats-grid span{display:block;color:var(--muted);font-size:.85rem}.stats-grid strong{font-size:1.8rem;color:var(--navy)}.filters{display:flex;gap:10px;margin-bottom:18px}.filters input{max-width:360px;margin:0}.filters select{max-width:190px;margin:0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:.86rem}th{text-align:left;color:#586f82;background:#f4f7f9;padding:10px;border-bottom:1px solid var(--line)}td{padding:13px 10px;border-bottom:1px solid #e6edf2;vertical-align:top}td small{display:block;color:var(--muted)}.mono{font-size:.8rem;color:var(--navy)}.table-link{color:var(--blue);font-weight:600}.empty{text-align:center;color:var(--muted);padding:35px}.pagination{display:flex;gap:5px;margin-top:18px}.pagination a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:5px}.pagination a.active{background:var(--navy);color:#fff}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px}.detail-main{display:grid;gap:18px}.detail-card h2,.sticky-form h2{font-size:1.05rem;margin:0 0 15px}.card-head h2{margin:0}.card-head span{color:var(--muted);font-size:.8rem}.admin-details{margin:0}.admin-details.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.admin-details.cols>div{grid-template-columns:95px 1fr}.preserve{white-space:normal}.muted{color:var(--muted)}.evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.evidence-grid a{border:1px solid var(--line);border-radius:6px;overflow:hidden}.evidence-grid img{display:block;width:100%;height:150px;object-fit:cover}.evidence-grid span{display:block;padding:8px;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-timeline article{display:grid;grid-template-columns:15px 1fr;gap:8px;padding-bottom:18px}.admin-timeline .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:8px}.admin-timeline p{margin:5px 0}.admin-timeline small{color:var(--muted)}.sticky-form{position:sticky;top:90px}.check-line.compact{padding:9px;font-size:.82rem}.error-page{min-height:100vh;display:grid;place-items:center;text-align:center;background:#edf2f5}.error-page main{background:#fff;border:1px solid var(--line);padding:45px;border-radius:12px}.error-page main>b{font-size:4rem;color:var(--gold)}
@media(max-width:920px){.brand-row{display:block;padding:14px 0}.brand-row nav{overflow:auto;gap:20px}.brand-row nav a{padding:12px 0}.hero-grid{grid-template-columns:1fr}.hero-card{display:none}.admin-shell{grid-template-columns:1fr}.admin-shell>aside{display:none}.stats-grid{grid-template-columns:1fr 1fr}.detail-layout{grid-template-columns:1fr}.sticky-form{position:static}.notice{grid-template-columns:1fr;gap:20px}}
@media(max-width:650px){.container,.narrow,.track-wrap{width:min(100% - 24px,1160px)}.utility span{display:none}.hero{padding:60px 0}.hero h1{font-size:2.55rem}.hero-actions{display:grid}.section{padding:48px 0}.steps{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr;gap:0}.form-card{padding:20px}.preview-grid{grid-template-columns:repeat(2,1fr)}.track-form{grid-template-columns:1fr}.status-head{align-items:flex-start;gap:10px}.details-list>div,.admin-details>div{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.admin-header{padding:0 12px}.admin-user>span{display:none}.admin-main{padding:18px 12px}.admin-title{align-items:flex-start}.stats-grid{gap:8px}.stats-grid>div{padding:12px}.filters{display:grid}.filters input,.filters select{max-width:none}.admin-card{padding:17px}.admin-details.cols{grid-template-columns:1fr}.evidence-grid{grid-template-columns:1fr 1fr}}