*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#f2f4f2;font-family:'IBM Plex Sans Thai',system-ui,sans-serif;color:#1c1c1c}
select,input,textarea,button{font-family:'IBM Plex Sans Thai',system-ui,sans-serif}
img{max-width:100%}
a{color:inherit}
.hidden{display:none !important}

/* ===== Login screen ===== */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0f2e1d;padding:20px}
.login-card{background:#fff;border-radius:18px;padding:44px 48px;width:400px;max-width:100%;display:flex;flex-direction:column;gap:18px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login-card__logo{height:64px;display:block;align-self:center}
.login-card__head{text-align:center;display:flex;flex-direction:column;gap:4px}
.login-card__head span:first-child{font-size:19px;font-weight:600;color:#1c1c1c}
.login-card__head span:last-child{font-size:13.5px;color:#888}
.login-card__fields{display:flex;flex-direction:column;gap:12px}
.login-field{border:1px solid rgba(0,0,0,.14);border-radius:8px;padding:13px 16px;font-size:15px;outline:none;width:100%}
.login-pass-wrap{position:relative;display:flex;align-items:center}
.login-pass-wrap .login-field{padding-right:44px}
.login-pass-toggle{position:absolute;right:14px;cursor:pointer;font-size:17px;color:#888;user-select:none;background:none;border:none;padding:0}
.login-error{font-size:13.5px;color:#b3261e;background:#fdecea;border-radius:8px;padding:10px 14px}
.login-btn{background:#175132;color:#fff;text-align:center;padding:13px;border-radius:999px;font-size:15.5px;font-weight:600;cursor:pointer;border:none;width:100%}
.login-btn:hover{background:#1e6a42}
.login-footnote{font-size:12.5px;color:#aaa;text-align:center;line-height:1.7}
.login-footnote a{color:#175132;text-decoration:none}

/* ===== Top bar ===== */
.admin-topbar{background:#0f2e1d;color:#fff;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:16px clamp(16px,3vw,40px)}
.admin-topbar__brand{display:flex;align-items:center;gap:16px}
.admin-topbar__logo{height:50px;display:block;filter:drop-shadow(0 0 1px rgba(255,255,255,.4))}
.admin-topbar__title{font-size:16px;font-weight:600;border-left:1px solid rgba(255,255,255,.25);padding-left:16px}
.admin-topbar__right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.admin-topbar__back{font-size:14px;color:rgba(255,255,255,.75);text-decoration:none}
.admin-topbar__email{font-size:13.5px;background:rgba(255,255,255,.12);padding:8px 16px;border-radius:999px}
.admin-topbar__logout{font-size:13.5px;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.3);cursor:pointer;background:none;color:#fff}
.admin-topbar__logout:hover{background:rgba(255,255,255,.12)}

/* ===== Tabs ===== */
.admin-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:20px clamp(16px,3vw,40px) 0}
.admin-tab{font-size:15px;padding:10px 22px;border-radius:999px;cursor:pointer;background:#fff;color:#444;font-weight:600;border:none}
.admin-tab.active{background:#175132;color:#fff}

.admin-panel{padding:24px clamp(16px,3vw,40px) 48px}

/* ===== Stat cards ===== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:16px;padding:28px clamp(16px,3vw,40px) 8px}
.stat-card{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:12px;padding:20px 24px;display:flex;flex-direction:column;gap:4px}
.stat-label{font-size:13px;color:#888}
.stat-value{font-size:30px;font-weight:700}
.stat-value--total{color:#175132}
.stat-value--new{color:#b26a00}
.stat-value--active{color:#1c4f8c}
.stat-value--done{color:#666}

/* ===== Quotes ===== */
.quotes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:20px;padding:20px clamp(16px,3vw,40px) 40px;align-items:start}
.card-panel{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:14px;overflow:hidden}
.card-panel__head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 24px;border-bottom:1px solid rgba(0,0,0,.06)}
.card-panel__head-title{font-size:16.5px;font-weight:600}
.card-panel__head-sub{font-size:13px;color:#999}
.quotes-empty{padding:48px 24px;text-align:center;display:flex;flex-direction:column;gap:8px}
.quotes-empty span:first-child{font-size:16px;color:#777}
.quotes-empty span:last-child{font-size:13.5px;color:#aaa}
.quote-row{display:flex;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid rgba(0,0,0,.05)}
.quote-row__main{display:flex;flex-direction:column;gap:5px;min-width:0}
.quote-row__name-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.quote-row__name{font-size:15.5px;font-weight:600}
.quote-status{font-size:12px;padding:3px 10px;border-radius:999px;font-weight:500}
.status-new{color:#b26a00;background:#fdf3e0}
.status-active{color:#1c4f8c;background:#e8f0fb}
.status-done{color:#666;background:#efefef}
.quote-row__contact{font-size:13.5px;color:#666}
.quote-row__detail{font-size:13.5px;color:#888;line-height:1.6}
.quote-row__date{font-size:12px;color:#aaa}
.quote-row__actions{display:flex;flex-direction:column;gap:8px;align-items:end;flex:none}
.quote-status-select{font-size:13px;padding:7px 10px;border:1px solid rgba(0,0,0,.15);border-radius:8px;background:#fff}
.quote-row__delete{font-size:12.5px;color:#b3261e;cursor:pointer;background:none;border:none;padding:0}

.email-col{display:flex;flex-direction:column;gap:16px}
.email-panel__head{padding:16px 22px;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;gap:10px}
.email-dot{width:9px;height:9px;border-radius:999px;background:#2e9e5b;display:inline-block}
.email-panel__title{font-size:15.5px;font-weight:600}
.email-panel__body{padding:18px 22px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:#555;line-height:1.7}
.email-preview{margin:0 22px 22px;border:1px solid rgba(0,0,0,.1);border-radius:10px;overflow:hidden}
.email-preview__head{background:#f7f8f7;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;gap:3px}
.email-preview__head span:first-child{font-size:13px;font-weight:600}
.email-preview__head span:last-child{font-size:12px;color:#888}
.email-preview__body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:13px;color:#444;line-height:1.7}
.email-preview__subject{font-weight:600;font-size:13.5px}
.email-preview__quote{color:#666}
.email-preview__meta{color:#aaa;font-size:12px}
.note-box{background:#fffbe9;border:1px solid #e8dcae;border-radius:14px;padding:18px 22px;font-size:13.5px;line-height:1.8;color:#6b5d2a}
.note-box--flat{border-radius:14px}

/* ===== Media manager ===== */
.media-groups{display:flex;flex-direction:column;gap:24px}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 24px}
@media (max-width:900px){.media-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.media-grid{grid-template-columns:1fr}}
.media-slot{border:1px solid rgba(0,0,0,.09);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.media-slot__preview{aspect-ratio:4/3;position:relative;background-size:contain;background-position:center;background-color:#eef2ee}
.media-slot__preview video{width:100%;height:100%;object-fit:cover;display:block}
.media-slot__badge{position:absolute;top:8px;right:8px;color:#fff;font-size:11px;padding:3px 9px;border-radius:999px}
.media-slot__badge--video{background:rgba(0,0,0,.65)}
.media-slot__badge--image{background:rgba(23,81,50,.85)}
.media-slot__body{padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.media-slot__label{font-size:13.5px;font-weight:600}
.media-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-pill{font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer;border:none}
.btn-pill-green{background:#175132;color:#fff}
.btn-pill-outline{background:none;border:1px solid rgba(0,0,0,.18);color:#1c1c1c}
.btn-pill-danger{background:none;color:#b3261e;border:1px solid rgba(179,38,30,.3)}
.file-label{position:relative;overflow:hidden}
.file-label input[type="file"]{display:none}

/* ===== Items manager ===== */
.items-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:20px;align-items:start}
.item-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.item-preview-col{display:flex;flex-direction:column;gap:10px}
.item-preview{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background-size:contain;background-position:center;background-color:#eef2ee}
.item-preview video{width:100%;height:100%;object-fit:cover;display:block}
.item-fields{display:flex;flex-direction:column;gap:12px}
.field-input,.field-select,.field-textarea{border:1px solid rgba(0,0,0,.14);border-radius:8px;padding:11px 14px;font-size:14.5px;outline:none;background:#fff;width:100%}
.field-textarea{resize:vertical}
.item-error{font-size:13px;color:#b3261e;background:#fdecea;border-radius:8px;padding:9px 13px}
.item-submit{background:#175132;color:#fff;text-align:center;padding:11px;border-radius:999px;font-size:14.5px;font-weight:600;cursor:pointer;border:none;width:100%}
.item-existing{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.item-row{display:flex;gap:14px;align-items:center;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:10px 14px}
.item-row__thumb{width:72px;aspect-ratio:4/3;border-radius:6px;flex:none;background-size:contain;background-position:center;background-color:#eef2ee}
.item-row__info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.item-row__name{font-size:14px;font-weight:600}
.item-row__cat{font-weight:400;color:#175132;font-size:12px}
.item-row__desc{font-size:12.5px;color:#888}
.item-row__delete{font-size:12.5px;color:#b3261e;cursor:pointer;flex:none;background:none;border:none;padding:0}
.item-row__edit{font-size:12.5px;color:#1c4f8c;cursor:pointer;flex:none;background:none;border:none;padding:0}
.item-row__actions{display:flex;gap:14px;flex:none}

/* ===== Category manager ===== */
.cat-list{display:flex;flex-direction:column}
.cat-row{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;border-bottom:1px solid rgba(0,0,0,.06);gap:10px}
.cat-row:last-child{border-bottom:none}
.cat-row__label{font-size:14px;font-weight:500}
.cat-row__actions{display:flex;gap:14px;flex:none}
.cat-row__edit{font-size:12.5px;color:#1c4f8c;cursor:pointer;background:none;border:none;padding:0}
.cat-row__delete{font-size:12.5px;color:#b3261e;cursor:pointer;background:none;border:none;padding:0}

/* ===== Settings ===== */
.settings-wrap{display:flex}
.settings-card{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:14px;overflow:hidden;width:440px;max-width:100%}
.settings-card__head{padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.06);font-size:16px;font-weight:600}
.settings-card__body{padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.settings-hint{font-size:13px;color:#888}
.settings-hint b{color:#175132}
.settings-error{font-size:13px;color:#b3261e;background:#fdecea;border-radius:8px;padding:9px 13px}
.settings-ok{font-size:13px;color:#175132;background:#eef2ee;border-radius:8px;padding:9px 13px}
.settings-save{background:#175132;color:#fff;text-align:center;padding:12px;border-radius:999px;font-size:14.5px;font-weight:600;cursor:pointer;border:none;width:100%}