@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}
:root{--purple:#6d4bd8;--purple2:#8061e6;--pink:#f35d91;--blue:#5568e8;--green:#39b978;--ink:#1d2433;--muted:#7b8498;--line:#ececf3;--bg:#f6f7fb}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none;color:inherit}
.top{height:74px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;padding:0 30px;gap:22px;position:sticky;top:0;z-index:20}
.top-search{width:300px;background:#f6f7fa;border:1px solid #eeeef4;border-radius:12px;padding:11px 14px;color:#8a92a4;font-size:13px}
.profile{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e9ddff;color:#5b39c8;font-weight:800}
.layout{display:flex;min-height:calc(100vh - 74px)}
.side{width:225px;background:linear-gradient(180deg,#6a49d4,#5e43c9);color:#fff;padding:18px 12px;display:flex;flex-direction:column}
.logo{font-size:23px;font-weight:800;padding:12px 15px 24px;letter-spacing:-.8px}.logo span{color:#ffd7e6}.logo small{display:block;font-size:9px;letter-spacing:1.2px;opacity:.8;margin-top:-2px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;margin-bottom:5px;color:#eee9ff;font-size:13px}.nav a:hover,.nav a.active{background:rgba(255,255,255,.17);color:#fff}.ico{width:24px;text-align:center;font-size:15px}
.side-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.15);padding-top:16px}.user-mini{display:flex;gap:9px;align-items:center;padding:8px 10px}.user-mini .avatar{width:32px;height:32px;background:#fff;color:#6848cf;font-size:11px}
.main{flex:1;padding:30px;max-width:1600px;margin:auto;width:100%}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px}.h1{font-size:25px;font-weight:800;letter-spacing:-.5px;margin:0 0 5px}.muted{color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px;box-shadow:0 4px 16px rgba(38,31,80,.04)}
.metric-card{color:#fff;min-height:118px;border:0;position:relative;overflow:hidden}.metric-card.purple{background:linear-gradient(135deg,#6846d0,#7b5ae4)}.metric-card.pink{background:linear-gradient(135deg,#ed4e83,#f56a9c)}.metric-card.blue{background:linear-gradient(135deg,#5063dc,#6478eb)}.metric-card.green{background:linear-gradient(135deg,#2db06f,#4ac98c)}.metric-card:after{content:'';position:absolute;width:88px;height:88px;border-radius:50%;right:-22px;top:-22px;background:rgba(255,255,255,.12)}.metric-title{font-size:12px;opacity:.9}.metric{font-size:28px;font-weight:800;margin:8px 0}.delta{font-size:11px;font-weight:600;opacity:.92}
.two{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(270px,.8fr);gap:15px}.chart-card{min-height:390px}.chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.chart-title{font-size:15px;font-weight:800}.select{border:1px solid #e6e8ef;background:#fff;border-radius:8px;padding:7px 10px;font-size:11px;color:#596176}
.chart{height:225px;position:relative;margin-top:8px;background:linear-gradient(to bottom,transparent 24%,#f1eff8 25%,transparent 25%,transparent 49%,#f1eff8 50%,transparent 50%,transparent 74%,#f1eff8 75%,transparent 75%);border-bottom:1px solid #eee}.line-svg{width:100%;height:100%}.chart-labels{display:flex;justify-content:space-between;color:#9aa2b3;font-size:10px;margin-top:7px}
.quick{display:grid;gap:12px}.quick-btn{border-radius:13px;padding:18px;color:#fff;display:flex;justify-content:space-between;align-items:center;min-height:82px}.quick-btn strong{font-size:14px}.quick-btn span{display:block;font-size:10px;opacity:.88;margin-top:4px}.quick-btn.p{background:linear-gradient(135deg,#734ed6,#8a68e9)}.quick-btn.pk{background:linear-gradient(135deg,#ef5a91,#f57ca7)}.quick-btn.l{background:#f0ebff;color:#5d43b5}.quick-btn.g{background:#e8f8ef;color:#188151}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.mini{border:1px solid #eeeef4;border-radius:10px;padding:12px}.mini b{display:block;font-size:17px;margin-top:5px}.mini small{color:#7b8498;font-size:10px}
.right-card h3{margin:0 0 14px;font-size:14px}.activity{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #f0f1f5}.activity:last-child{border-bottom:0}.act-icon{width:30px;height:30px;border-radius:9px;background:#f0eaff;color:#6b4bd1;display:grid;place-items:center;font-size:12px;flex:none}.activity b{font-size:11px;display:block}.activity small{font-size:10px;color:#8991a1}.cat{margin:14px 0}.cat-head{display:flex;justify-content:space-between;font-size:11px;font-weight:700}.bar{height:5px;background:#eef0f4;border-radius:99px;margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;border-radius:99px;background:var(--purple)}
.bottom{margin-top:15px}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:13px 11px;border-bottom:1px solid #f0f1f5;font-size:11px}.table th{font-size:10px;color:#8a92a4;text-transform:uppercase;letter-spacing:.05em}.pill{display:inline-block;padding:5px 9px;border-radius:99px;font-size:10px;font-weight:800}.pill.sent{background:#eaf1ff;color:#4261c9}.pill.replied{background:#e9f8ef;color:#1b7b4b}.pill.draft{background:#fff2dd;color:#9a6500}.pill.closed{background:#eceff3;color:#5e6675}
.btn{display:inline-block;border:0;border-radius:9px;padding:10px 14px;font-weight:700;font-size:12px;cursor:pointer;background:#eceef3;color:#18202a}.btn.primary{background:var(--purple);color:#fff}.btn.dark{background:#1d2433;color:#fff}.btn.small{padding:7px 10px;font-size:11px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:700}.field input,.field textarea,.field select{width:100%;border:1px solid #dfe2e9;border-radius:8px;padding:10px 11px;font:inherit;background:#fff}.field textarea{min-height:110px;resize:vertical}
.notice{padding:12px 14px;border-radius:9px;background:#eef6ff;border:1px solid #cfe5ff;color:#17527a;margin-bottom:16px}.success{background:#edf9f0;border-color:#ccebd3;color:#17652b}.error{background:#fff0f0;border-color:#f0c4c4;color:#9c1c1c}
.searchbox{display:grid;grid-template-columns:1fr auto;gap:10px;margin:20px 0}.supplier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.supplier{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px}.supplier h3{margin:0 0 7px;font-size:16px}.source{font-size:11px;color:#64748b;margin-top:10px;word-break:break-all}
.login{min-height:100vh;display:grid;place-items:center;background:#f3f1fb}.login-box{background:#fff;width:min(420px,92vw);padding:30px;border-radius:15px;box-shadow:0 15px 50px rgba(60,45,120,.12)}.login-box h1{margin-top:0}
.footer-note{margin-top:20px;color:#718096;font-size:12px}
@media(max-width:1150px){.grid{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.supplier-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.side{width:70px}.logo{font-size:0}.logo small{display:none}.nav a{font-size:0;justify-content:center}.nav a .ico{font-size:16px}.main{padding:20px}.top-search{width:220px}}
@media(max-width:600px){.top{height:64px;padding:0 12px}.top-search{display:none}.layout{min-height:calc(100vh - 64px)}.side{display:none}.main{padding:15px}.grid{grid-template-columns:1fr}.stats-row{grid-template-columns:repeat(2,1fr)}.supplier-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}

.wide{width:100%}.login-logo{font-size:28px;font-weight:800;letter-spacing:-1px;margin-bottom:20px}.login-logo span{color:#6d4bd8}.login-logo small{display:block;font-size:9px;letter-spacing:1.5px;color:#8991a1;margin-top:2px}.remember{font-size:12px;color:#687184}.remember input{vertical-align:middle;margin-right:6px}.logo img{max-width:155px;max-height:42px;object-fit:contain;display:block}