/* Buyit CMS — clean, responsive control-center interface. No external dependencies. */
:root{--ink:#17263c;--muted:#718096;--navy:#10233e;--navy2:#152f51;--brand:#2284e6;--brand2:#57b4fb;--paper:#f4f7fb;--line:#e7edf4;--white:#fff;--green:#10a876;--red:#dc5660;--shadow:0 12px 36px rgba(22,49,77,.045);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans Thai","Sarabun","Segoe UI",sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);font-size:14px;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{transition:border-color .16s,background .16s,box-shadow .16s,color .16s}button{cursor:pointer}b,strong{font-weight:700}.muted{color:var(--muted)}.small{font-size:12px}.nowrap{white-space:nowrap}.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}.full-width{width:100%}.with-top{margin-top:18px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--brand);text-transform:uppercase}.panel{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);min-width:0}.panel h2{font-size:16px;letter-spacing:-.02em;margin:0 0 8px}.panel h3{font-size:14px;margin:16px 0 5px}.panel p{margin:4px 0 12px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-heading h2{margin:0;font-size:16px}.panel-heading p{font-size:12px;color:var(--muted);margin:3px 0 0}.panel-heading .text-link{white-space:nowrap}.text-link{color:#1878d9;font-size:12px;font-weight:700}.text-link:hover{text-decoration:underline}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:40px;padding:10px 16px;border-radius:10px;border:1px solid transparent;font-weight:700;text-align:center;line-height:1.35;cursor:pointer}.btn:hover{filter:brightness(.98);transform:translateY(-1px)}.btn:focus-visible,.nav-item:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(25,131,231,.24);outline-offset:1px}.btn.primary{background:linear-gradient(120deg,#1675d9,#329cf2);color:#fff;box-shadow:0 8px 18px rgba(34,132,230,.2)}.btn.secondary{border-color:#d7e5f3;background:#eff6fd;color:#166ec4}.btn.ghost{border-color:#dfe8f1;background:#fff;color:#365371}.btn.danger{border-color:#fae0e2;background:#fff0f1;color:#b8424b}.btn.tiny{padding:6px 10px;min-height:29px;font-size:11px;border-radius:7px}.count-pill{border-radius:8px;padding:5px 10px;background:#f1f6fc;font-size:12px;color:#65809d;font-weight:700}.notice{margin:0 0 18px;padding:13px 16px;border-radius:10px;font-size:13px;border:1px solid #dce9f5;background:#f1f8ff;color:#215887}.notice.success{border-color:#c8eadc;background:#eaf9f3;color:#137d5e}.notice.error{border-color:#f3d3d4;background:#fff0f1;color:#9c303c}.notice.warning{border-color:#f7e1b4;background:#fff9e9;color:#89601b}.notice.neutral{border-color:#e0e8f2;background:#f7f9fc;color:#5f7088}.notice code{overflow-wrap:anywhere}
/* Main navigation */
.admin-shell{display:flex;min-height:100vh}.sidebar{width:252px;flex:0 0 252px;background:linear-gradient(170deg,#152d4a,#0f2138 75%);color:#d4e2ef;display:flex;flex-direction:column;min-height:100vh;padding:23px 14px 16px;position:sticky;top:0;height:100vh;overflow:auto}.sidebar-brand,.setup-head,.login-badge{display:flex;align-items:center;gap:12px}.sidebar-brand{padding:2px 11px 18px;color:#fff}.brand-icon{display:grid;place-items:center;flex:none;background:linear-gradient(150deg,#58c2ff,#267de6);border-radius:12px;color:#fff;font-size:21px;font-weight:900;width:39px;height:39px;box-shadow:0 5px 17px rgba(50,150,242,.24)}.sidebar-brand strong,.setup-head b,.login-badge strong{font-size:19px;display:block;line-height:1.35;letter-spacing:-.04em}.sidebar-brand small,.setup-head small,.login-badge small{font-size:9px;letter-spacing:.13em;color:#8cabc9;display:block}.sidebar-cap{font-size:10px;color:#7593b2;letter-spacing:.04em;padding:8px 12px 19px}.nav-section{margin-bottom:13px}.nav-heading{font-size:10px;letter-spacing:.09em;color:#7e9ab7;padding:10px 12px 7px;text-transform:uppercase;font-weight:800}.nav-item{display:flex;align-items:center;gap:12px;min-height:40px;padding:9px 13px;margin:3px 0;border-radius:9px;font-size:12px;font-weight:600;color:#c0d0e1}.nav-item:hover{color:#fff;background:rgba(255,255,255,.075)}.nav-item.selected{background:#2573bb;color:#fff;box-shadow:0 5px 18px rgba(12,20,39,.2)}.nav-symbol{font-size:18px;width:22px;text-align:center;line-height:1}.planned-item{padding:8px 13px;color:#9db0c4;font-size:11px}.planned-item small{display:block;color:#6989a8;font-size:10px;padding-left:21px}.sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.11);padding:17px 10px 0;display:flex;align-items:center;gap:9px}.profile-avatar{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#235581;color:#e3f5ff;font-weight:800}.sidebar-account{flex:1;min-width:0}.sidebar-account b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:12px}.sidebar-account small{color:#8ca9c4;font-size:10px}.icon-logout{border:0;background:transparent;color:#a7c4dd;font-size:22px}.main-area{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{background:#fff;border-bottom:1px solid var(--line);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;color:#69809b;font-size:12px;gap:12px}.topbar-breadcrumb span{margin:0 10px;color:#bcc9d5}.topbar-right{display:flex;gap:8px;align-items:center}.live-dot{height:7px;width:7px;background:#23b887;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px #e3f6ef}.visit-site{margin-left:20px;border:1px solid #d8e6f0;border-radius:8px;padding:6px 12px;color:#386d9d;font-weight:700}.admin-content{flex:1;width:100%;max-width:1600px;margin:0 auto;padding:29px 35px 55px}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:23px}.page-heading h1{font-size:25px;margin:1px 0 0;letter-spacing:-.05em}.heading-date{font-size:12px;color:#8ba0b5}.admin-footer{padding:16px 34px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border-top:1px solid #e4ebf4;color:#8191a6;font-size:11px}.admin-footer a{color:#277bce;font-weight:700}
/* Analytics */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:19px}.kpi-card{background:#fff;border:1px solid var(--line);padding:20px 20px 18px;border-radius:14px;box-shadow:var(--shadow)}.kpi-top{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;font-weight:600;color:#6d839c}.kpi-icon{background:#eef6ff;color:#3999ef;display:grid;place-items:center;width:33px;height:33px;border-radius:9px;font-size:18px}.kpi-card strong{display:block;line-height:1.2;font-size:29px;color:#142b46;margin:15px 0 7px;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.kpi-card small{font-size:11px;color:#8295aa}.content-grid{display:grid;gap:18px;margin-bottom:18px;align-items:stretch}.content-grid.two-thirds{grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr)}.content-grid.half{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid.thirds{grid-template-columns:repeat(3,minmax(0,1fr))}.traffic-chart{height:234px;display:flex;gap:5px;align-items:stretch;padding-top:8px;padding-bottom:6px;overflow-x:auto}.chart-col{height:100%;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;gap:6px;flex:1 0 8px;min-width:8px;max-width:40px}.chart-track{height:196px;width:100%;display:flex;align-items:flex-end;background:linear-gradient(0deg,transparent 24%,#eff4fa 25%,transparent 26%,transparent 49%,#eff4fa 50%,transparent 51%,transparent 74%,#eff4fa 75%,transparent 76%);border-bottom:1px solid #dfeaf5}.chart-bar{width:100%;min-height:3px;background:linear-gradient(0deg,#187fdf,#75caff);border-radius:5px 5px 1px 1px;box-shadow:0 2px 4px rgba(22,128,220,.1)}.chart-col small{height:19px;font-size:10px;color:#91a2b5}.chart-col:hover .chart-bar{background:#1663bb}.chart-legend{font-size:10px;color:#91a2b5;margin:0 0 0 2px;display:flex;align-items:center;gap:7px}.legend-dot{width:7px;height:7px;background:#56ace9;display:inline-block;border-radius:50%}.chart-large{margin-bottom:18px}.chart-large .traffic-chart{height:259px}.chart-large .chart-track{height:215px}.rank-list{width:100%}.rank-head{display:flex;justify-content:space-between;padding:4px 0 10px;color:#899bb0;font-size:10px;border-bottom:1px solid var(--line);font-weight:700}.rank-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 15px;border-bottom:1px solid #f0f3f8;padding:10px 0 12px}.rank-label{display:flex;gap:8px;align-items:center;min-width:0}.rank-num{font-size:10px;color:#a1b1c3;font-weight:800}.rank-text{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:#49617e}.rank-row strong{font-size:12px;color:#26476b;font-variant-numeric:tabular-nums}.rank-progress{grid-column:1/-1;height:4px;background:#f0f4f9;border-radius:8px;margin-left:26px;overflow:hidden}.rank-progress span{display:block;height:100%;background:#55aaee;border-radius:8px}.overview-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #edf1f6;color:#7387a0;font-size:12px}.overview-row strong{color:#274461;text-align:right;font-size:12px;word-break:break-all}.info-strip{background:#edf5ff;border:1px solid #d7e8fa;border-radius:11px;padding:15px 18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#39719f;font-size:11px}.info-strip a{font-weight:800;color:#1a75c8}.filter-row{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.filter-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.filter-label{font-size:12px;color:#8396a9;margin-right:7px}.chip{padding:7px 13px;background:#fff;border:1px solid #dce6f1;border-radius:8px;color:#60809f;font-size:11px;font-weight:700}.chip.active{color:#fff;border-color:#258be2;background:#258be2}.event-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.event-tile{padding:15px 14px;background:#f7faff;border:1px solid #e6f0fa;border-radius:11px}.event-tile span{display:block;font-size:11px;color:#6f8caa;min-height:30px}.event-tile strong{display:block;font-size:25px;color:#204972;font-variant-numeric:tabular-nums}.table-scroll{width:100%;overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:12px}.data-table th{text-align:left;padding:12px 13px;background:#f7f9fc;color:#8495aa;font-size:10px;white-space:nowrap}.data-table td{padding:13px;border-bottom:1px solid #edf1f6;vertical-align:middle;color:#445d78}.data-table td small{display:block;color:#91a1b3;font-size:10px}.data-table td b{font-weight:600}.data-table tr:hover td{background:#fbfdff}.data-table .path-cell{max-width:270px;word-break:break-word}.empty-state{padding:25px 10px;text-align:center;color:#9aabc0;font-size:12px}.table-actions{display:flex;align-items:center;gap:6px}.table-actions form{display:inline-flex}.section-intro{margin:-8px 0 24px;color:#7a8ea7;font-size:12px}
/* Forms and management pages */
input:not([type="checkbox"]):not([type="file"]),select{display:block;width:100%;min-height:44px;border:1px solid #dce6f1;border-radius:9px;padding:9px 12px;background:#fff;color:var(--ink);outline:none}input::placeholder{color:#b4c1ce}input:focus,select:focus{border-color:#68b6f3;box-shadow:0 0 0 3px rgba(38,150,238,.09)}label{display:block;font-weight:650;font-size:12px;color:#43607b}label small{display:block;font-weight:400;color:#93a2b4;margin-top:5px;font-size:10px}.form-label{margin-bottom:16px}.form-label input,.form-label select,.form-grid input{margin-top:7px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-grid .wide{grid-column:1/-1}.soft-divider{border:0;border-top:1px solid #edf1f7;margin:27px 0}.form-actions{margin-top:25px;display:flex;justify-content:flex-end}.settings-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(270px,.75fr);gap:18px;align-items:start}.settings-aside{position:sticky;top:80px}.logo-upload-row{display:flex;align-items:center;gap:20px;margin-top:16px}.logo-preview{width:110px;height:110px;border:1px dashed #cedbe9;background:#f7fafc;display:grid;place-items:center;border-radius:12px;flex:none}.logo-preview img{max-width:90%;max-height:90%;object-fit:contain}.logo-upload-text{flex:1;min-width:0}.logo-upload-text input[type=file]{display:block;width:100%;margin-top:10px;color:#7188a2;font-size:12px}.check-label{display:flex;align-items:flex-start;gap:8px;margin-top:15px;font-size:11px}.switch-label{display:flex;gap:10px;align-items:flex-start;margin:15px 0 20px;padding:14px;border:1px solid #e4edf6;border-radius:10px}.switch-label b{display:block}.switch-label small{margin:3px 0}.switch-label input{margin:4px 0}.brand-current{text-align:center;background:#f8fbff;border:1px solid #e5eef8;border-radius:12px;padding:20px 10px}.brand-current img{height:80px;width:80px;object-fit:contain}.brand-current strong{display:block;margin:9px auto 0;font-size:14px}.brand-current span{color:#97a8b9;font-size:11px}.settings-aside>.btn{margin-top:20px}.page-search{display:flex;gap:9px;margin:16px 0}.page-search input{flex:1}.pagination{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-top:18px;color:#8fa0b4;font-size:11px}.pagination div{display:flex;gap:14px}.pagination a{color:#257aca;font-weight:700}.backup-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.backup-card{display:flex;flex-direction:column;min-height:350px}.backup-card .backup-illustration{display:grid;place-items:center;height:48px;width:48px;color:#227ee0;background:#edf6ff;font-size:24px;border-radius:12px;margin-bottom:16px}.backup-pill{display:inline-block;background:#ecf5ff;color:#3893d6;border-radius:5px;padding:3px 8px;letter-spacing:.1em;font-size:9px;font-weight:800;align-self:flex-start;margin-bottom:12px}.backup-card h2{font-size:16px}.backup-card p{color:#7388a0;font-size:12px;line-height:1.8;margin-bottom:20px}.backup-meta{margin-top:auto;margin-bottom:12px;color:#7890a8;font-size:11px}.backup-meta b{float:right;color:#476d90}.backup-card form{margin:0}.backup-card button{font-size:12px}
/* Authentication / Installation */
.login-screen,.setup-screen{min-height:100vh;background:radial-gradient(circle at 12% 10%,#e2f2ff 0,transparent 35%),radial-gradient(circle at 90% 80%,#e6eaff 0,transparent 40%),#f4f7fc}.login-screen{display:grid;place-items:center;padding:26px 15px}.login-wrap{max-width:420px;width:100%}.login-badge{justify-content:center;margin-bottom:24px}.login-badge strong{font-size:21px}.login-badge small{color:#718ca8}.login-panel{padding:33px}.login-panel h1{font-size:24px;margin:5px 0 6px}.login-panel>p{font-size:12px;margin-bottom:26px}.login-panel .form-label{margin-bottom:20px}.login-security{color:#96a6b8;font-size:10px;text-align:center;margin:15px 0 0}.login-below{display:flex;justify-content:space-between;margin:20px 5px;color:#8b9bb0;font-size:11px}.login-below a{color:#237dc8;font-weight:700}.setup-wrap{max-width:790px;margin:auto;padding:38px 16px 65px}.setup-head{justify-content:center;margin-bottom:27px}.setup-head b{font-size:21px}.setup-hero{padding:30px;margin-bottom:16px;border-color:#d9e9fa;background:linear-gradient(130deg,#fff,#f7fbff)}.setup-hero h1{font-size:27px;margin:3px 0}.setup-hero p{color:#718aa2;max-width:600px;margin:7px 0 24px}.setup-steps{display:flex;gap:9px;flex-wrap:wrap}.setup-steps span{padding:8px 12px;border:1px solid #e1ebf6;border-radius:7px;background:#fff;color:#9aacbd;font-size:11px;font-weight:700}.setup-steps span.active{background:#e8f5ff;border-color:#bde1fc;color:#2883ca}.setup-wrap>.panel{margin-bottom:16px}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 25px;margin:13px 0}.check-item{display:flex;align-items:center;gap:10px;font-size:12px;color:#526c86}.check-item small{font-size:10px;color:#bd9c66}.check-symbol{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:800}.check-symbol.pass{background:#e3f8ef;color:#129668}.check-symbol.fail{background:#fff0e9;color:#d46e3a}.setup-form{padding:27px 29px}.setup-form h2{margin:5px 0 9px}.setup-form .form-grid{margin-top:20px}.setup-action{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:29px}.setup-foot{text-align:center;color:#879bb1;font-size:11px;padding:12px}.setup-foot a{color:#277dcb;font-weight:700}
@media(max-width:1190px){.content-grid.two-thirds{grid-template-columns:minmax(0,1fr)}.settings-layout{grid-template-columns:minmax(0,1fr)}.settings-aside{position:static}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.backup-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.event-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.admin-shell{display:block}.sidebar{position:relative;top:auto;width:100%;height:auto;min-height:0;overflow:visible;padding:12px 14px}.sidebar-brand{padding:2px 0 10px}.sidebar-cap,.planned,.sidebar-bottom{display:none}.nav-section{display:inline-flex;flex-wrap:wrap;vertical-align:top;margin:0 5px 0 0}.nav-heading{display:none}.nav-item{font-size:11px;min-height:35px;padding:6px 9px;margin:2px}.nav-symbol{font-size:14px;width:auto}.topbar{height:auto;min-height:45px;padding:7px 20px}.main-area{width:100%}.admin-content{padding:22px 17px 30px}.admin-footer{padding:16px 20px}.content-grid.thirds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.page-heading h1{font-size:22px}.heading-date,.topbar-right .live-dot{display:none}.panel{padding:17px}.kpi-grid{gap:10px}.kpi-card{padding:14px}.kpi-card strong{font-size:26px}.kpi-top{font-size:11px}.content-grid.half,.content-grid.thirds,.backup-cards,.settings-layout,.form-grid,.check-grid{grid-template-columns:minmax(0,1fr)}.form-grid .wide{grid-column:auto}.event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.login-panel{padding:23px}.backup-card{min-height:auto}.backup-meta{margin-top:16px}.setup-form{padding:20px}.setup-action .btn{width:100%}.topbar-right{font-size:0}.visit-site{font-size:11px;margin:0}.filter-chips{gap:5px}.chip{padding:5px 9px}.settings-aside{display:none}.logo-upload-row{flex-wrap:wrap}.nav-item{padding:6px}.nav-item .nav-symbol{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}