:root{
    --bg:#f5f9ff;
    --card:#ffffff;
    --text:#10233f;
    --muted:#667085;
    --line:#e3eaf5;
    --blue:#063d95;
    --blue2:#0b55c5;
    --green:#10a34a;
    --green2:#07923e;
    --cyan:#05a9e8;
    --danger:#d92d20;
    --warning:#dc6803;
    --shadow:0 14px 35px rgba(6,61,149,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#ffffff 0%,var(--bg) 100%);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1320px;margin:0 auto;padding:24px}
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;box-shadow:0 8px 22px rgba(16,24,40,.05)}
.topbar-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 24px}
.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:900;color:var(--blue)}
.brand img{height:58px;max-width:270px;object-fit:contain}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{padding:9px 12px;border-radius:999px;background:#f2f6ff;color:#063d95;font-size:13px;font-weight:800;border:1px solid #e3eaf5}
.nav a:hover{background:linear-gradient(90deg,var(--blue),var(--green));color:#fff}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}
.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-12{grid-column:span 12}
h1,h2,h3{margin-top:0}
h1{font-size:34px}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:11px 16px;background:linear-gradient(90deg,var(--blue),var(--blue2));color:#fff;cursor:pointer;font-weight:900;font-size:14px;box-shadow:0 8px 18px rgba(6,61,149,.16)}
.btn:hover{filter:brightness(1.04)}
.btn.secondary{background:#344054}.btn.success{background:linear-gradient(90deg,var(--green),var(--green2))}.btn.warning{background:var(--warning)}.btn.danger{background:var(--danger)}.btn.light{background:#eef5ff;color:#063d95;box-shadow:none;border:1px solid #d8e6ff}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue2);box-shadow:0 0 0 4px rgba(11,85,197,.10)}
label{display:block;font-weight:900;margin:10px 0 6px;font-size:14px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:15px;overflow:hidden}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:14px}
th{background:#f4f8ff;color:#063d95}
.badge{display:inline-block;padding:5px 10px;border-radius:999px;background:#eef2f7;color:#344054;font-size:12px;font-weight:900}
.badge.green{background:#dcfae6;color:#067647}.badge.red{background:#fee4e2;color:#b42318}.badge.orange{background:#fef0c7;color:#b54708}.badge.gray{background:#f2f4f7;color:#344054}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hero{padding:54px 0}
.hero-logo{max-width:560px;width:100%;display:block;margin-bottom:22px}
.hero h1{font-size:46px;line-height:1.1;margin-bottom:14px;color:#063d95}
.price{font-size:25px;font-weight:900}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.summary-line{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:10px 0;gap:14px}
.kpi{display:flex;align-items:center;justify-content:space-between}
.kpi .icon{width:44px;height:44px;border-radius:16px;background:#eef8ff;display:flex;align-items:center;justify-content:center;font-weight:900;color:#063d95}
.table-wrap{overflow-x:auto}
.quick-card{transition:.18s transform,.18s box-shadow}
.quick-card:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(6,61,149,.16)}
.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:100;align-items:center;justify-content:center;padding:20px}
.modal.active{display:flex}
.modal-box{background:#fff;border-radius:24px;max-width:920px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 25px 80px rgba(0,0,0,.25)}
.modal-box.modal-xl{max-width:1160px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-body{padding:22px}
.modal-close{border:0;background:#eef5ff;color:#063d95;border-radius:12px;padding:9px 12px;font-weight:900;cursor:pointer}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab-btn{border:1px solid var(--line);background:#fff;color:#063d95;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer}
.tab-btn.active{background:linear-gradient(90deg,var(--blue),var(--green));color:#fff}
.tab-pane{display:none}.tab-pane.active{display:block}
.admin-shell{display:grid;grid-template-columns:260px 1fr;gap:22px}
.side-panel{position:sticky;top:98px;align-self:start}
.side-link{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;border:1px solid var(--line);border-radius:15px;margin-bottom:8px;background:#fff;font-weight:900;color:#063d95}
.side-link:hover{background:#eef8ff}
.item-card{border:1px solid var(--line);border-radius:20px;padding:16px;background:#fff;box-shadow:0 8px 18px rgba(6,61,149,.06);height:100%;display:flex;flex-direction:column;gap:10px}
.item-card.selected{border-color:var(--green);box-shadow:0 0 0 4px rgba(16,163,74,.12)}
.item-card .item-title{font-size:17px;font-weight:900;color:#063d95}
.item-card .item-price{font-size:18px;font-weight:900}
.qty-box{display:flex;gap:8px;align-items:center;margin-top:auto}
.qty-box input{max-width:100px}
.step-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.step{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff;font-weight:900;color:#667085}
.step.active{background:linear-gradient(90deg,var(--blue),var(--green));color:#fff}
@media(max-width:980px){
    .grid{grid-template-columns:1fr}
    .col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-12{grid-column:span 1}
    .form-row{grid-template-columns:1fr}
    .topbar-inner{display:block}
    .nav{margin-top:12px}
    table{min-width:760px}
    .admin-shell{grid-template-columns:1fr}
    .side-panel{position:relative;top:0}
    .brand img{height:50px;max-width:240px}
    .hero-logo{max-width:430px}
}