:root{
  --ink:#111827; --paper:#f4f4f2; --card:#fff; --line:#e6e5e1; --muted:#6b7280; --faint:#9ca3af;
  --amber:#f59e0b; --navy:#141a26; --navy-2:#161d2b;
  --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif; --script:'Mr De Haviland',cursive;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--sans);color:#111827;background:#f4f4f2;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
input,select,textarea,button{font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:none;}
::placeholder{color:#9ca3af;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#d6d6d2;border-radius:999px;border:3px solid transparent;background-clip:padding-box;}
.serif{font-family:var(--serif);}
.mono{font-family:var(--mono);}
.script{font-family:var(--script);}
.h-page{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes toastIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.fade-up{animation:fadeUp .32s cubic-bezier(.2,.7,.3,1) both;}

/* layout */
.app{display:flex;min-height:100vh;}
.sidebar{width:244px;flex:none;background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px 22px;}
.brand-badge{width:34px;height:34px;border-radius:10px;background:#1c2434;color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600;}
.brand-name{font-size:16px;font-weight:500;line-height:1;display:block;}
.brand-sub{font-size:11px;color:#7a8296;margin-top:3px;display:block;}
.nav{display:flex;flex-direction:column;gap:3px;flex:1;}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:500;text-align:left;background:transparent;color:#a3abbc;transition:background .15s,color .15s;}
.nav-item:hover{background:var(--navy-2);color:#e6eaf2;}
.nav-item.active{background:#1c2434;color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--amber);}
.nav-ic{width:18px;height:18px;flex:none;}
.nav-label{flex:1;}
.nav-badge{font-size:11px;font-weight:700;background:var(--amber);color:#1c2434;border-radius:999px;padding:1px 7px;}
.side-foot{border-top:1px solid #232b3a;padding-top:14px;margin-top:10px;}
.side-user{display:flex;align-items:center;gap:10px;padding:0 8px 12px;}
.side-avatar{width:34px;height:34px;border-radius:999px;background:#26304a;color:#cbd3e6;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex:none;}
.side-user-info{overflow:hidden;}
.side-user-name{font-size:13px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.side-user-email{font-size:11px;color:#7a8296;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{position:sticky;top:0;z-index:40;background:rgba(244,244,242,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:12px 28px;display:flex;align-items:center;gap:14px;}
.search{position:relative;flex:1;max-width:420px;}
.search-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af;}
.search .field{padding-left:36px;background:#fff;border-color:var(--line);}
.spacer{flex:1;}
.content{flex:1;padding:28px;max-width:1240px;width:100%;margin:0 auto;}

/* header */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;}
.page-head h1{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;font-size:27px;margin:0;}
.page-head p{color:var(--muted);font-size:13.5px;margin:3px 0 0;}
.head-actions{display:flex;gap:10px;}

/* card */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;}
.p16{padding:16px;}.p18{padding:18px;}.p20{padding:20px;}.p22{padding:22px;}
.grid{display:grid;}
.gap14{gap:14px;}.gap16{gap:16px;}
.g4{grid-template-columns:repeat(4,1fr);}.g3{grid-template-columns:repeat(3,1fr);}.g2{grid-template-columns:1fr 1fr;}
.mt16{margin-top:16px;}.mb16{margin-bottom:16px;}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.pill .dot{width:6px;height:6px;border-radius:999px;background:currentColor;}
.pill-gray{background:#f3f4f6;color:#4b5563;}
.pill-amber{background:#fffbeb;color:#b45309;}
.pill-green{background:#ecfdf5;color:#047857;}
.pill-red{background:#fef2f2;color:#b91c1c;}
.pill-slate{background:#eef2f7;color:#334155;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,opacity .15s;}
.btn svg{width:16px;height:16px;}
.btn-dark{background:#111827;color:#fff;}
.btn-dark:hover{background:#1f2937;}
.btn-dark:disabled{background:#c9c8c2;cursor:not-allowed;}
.btn-ghost{background:#fff;color:#4b4b45;border-color:#d8d7d2;}
.btn-ghost:hover{background:#faf9f7;}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-block{width:100%;}

/* fields */
.field{width:100%;padding:10px 12px;border:1px solid #d8d7d2;border-radius:10px;font-size:13.5px;background:#fff;color:#111827;}
.field:focus{border-color:#111827;}
.label{display:block;font-size:12px;font-weight:600;color:#6b7280;margin-bottom:6px;}
textarea.field{resize:vertical;}

/* stat */
.stat-label{font-size:12.5px;color:#6b7280;font-weight:600;}
.stat-val{font-family:var(--serif);font-size:30px;font-weight:500;margin-top:10px;}
.stat-sub{font-size:12px;color:#9ca3af;margin-top:4px;}

/* tables / rows */
.thead{display:grid;gap:12px;padding:12px 20px;font-size:11px;font-weight:700;color:#9ca3af;background:#faf9f7;border-bottom:1px solid #efeee9;}
.trow{display:grid;gap:12px;padding:14px 20px;align-items:center;}
.divide > *+*{border-top:1px solid #efeee9;}
.overflow-hide{overflow:hidden;}
.r{ text-align:right;}
.dl-link{font-size:12.5px;font-weight:600;color:#111827;display:inline-flex;align-items:center;gap:5px;}
.dl-link svg{width:13px;height:13px;}

/* misc */
.avatar{display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;border-radius:10px;}
.muted{color:#6b7280;}.faint{color:#9ca3af;}
.section-title{font-size:15px;font-weight:600;margin:0 0 12px;}
.empty{padding:22px 0;text-align:center;color:#9ca3af;font-size:13px;}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;background:#111827;color:#fff;padding:12px 20px;border-radius:12px;font-size:13.5px;font-weight:500;box-shadow:0 12px 40px rgba(0,0,0,.28);animation:toastIn .3s cubic-bezier(.2,.7,.3,1) both;display:flex;align-items:center;gap:10px;}
.toast-dot{width:7px;height:7px;border-radius:999px;background:#34d399;}

/* auth / bare */
.bare{min-height:100vh;background:#f4f4f2;display:flex;align-items:center;justify-content:center;padding:24px;}
.bare-card{width:100%;max-width:400px;}
.sign-wrap{min-height:100vh;background:#f4f4f2;padding:48px 20px;}
.sign-inner{max-width:640px;margin:0 auto;}
.sig-pad{height:70px;border-radius:10px;background:#faf9f7;border:1px dashed #d8d7d2;display:flex;align-items:center;justify-content:center;}
.sig-pad span{font-family:var(--script);font-size:38px;color:#111827;}

/* wizard-ish new-forms */
.form-card{max-width:820px;}
.row-item{display:grid;grid-template-columns:1fr 70px 120px 40px;gap:8px;align-items:center;margin-bottom:8px;}
.doc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;}
.clause+ .clause{border-top:1px solid #efeee9;margin-top:14px;padding-top:14px;}

@media(max-width:900px){
  .g4{grid-template-columns:1fr 1fr;}.g3,.g2{grid-template-columns:1fr;}
  .sidebar{width:70px;}.brand span:last-child,.nav-label,.side-user-info,.nav-badge{display:none;}
}