:root{
  --bg:#f4f7fb;
  --bg-2:#eef3f9;
  --surface:#ffffff;
  --surface-soft:#f8fbff;
  --surface-muted:#f3f6fb;
  --border:#e3eaf3;
  --text:#162235;
  --muted:#6a7a91;
  --navy:#0f1728;
  --navy-2:#182235;
  --navy-3:#22314b;
  --primary:#2f6fed;
  --primary-2:#4f86f5;
  --primary-soft:#edf4ff;
  --green:#1a9b72;
  --green-soft:#eaf8f3;
  --amber:#d78b17;
  --amber-soft:#fff5e6;
  --red:#d14b5e;
  --red-soft:#fff0f3;
  --radius:18px;
  --radius-md:14px;
  --radius-sm:12px;
  --shadow:0 14px 36px rgba(15,23,40,.07);
  --shadow-soft:0 8px 22px rgba(15,23,40,.05);
  --sidebar:258px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
svg{width:20px;height:20px;display:block;fill:currentColor}

.app-shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;overflow:auto;
  background:linear-gradient(180deg,#0d1626 0%, #152238 100%);
  color:#fff;padding:20px 18px;display:flex;flex-direction:column;gap:18px;
}
.sidebar::-webkit-scrollbar{width:7px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
.sidebar__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sidebar__close{display:none;width:40px;height:40px;border:none;border-radius:12px;background:rgba(255,255,255,.08);color:#fff}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 12px 28px rgba(47,111,237,.28)
}
.brand__text{display:grid;gap:2px}
.brand__text strong{font-size:.98rem;font-weight:800;line-height:1.1}
.brand__text small{font-size:.76rem;color:rgba(255,255,255,.65)}
.project-card{
  padding:18px 16px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.07)
}
.project-card__label,.eyebrow{
  text-transform:uppercase;letter-spacing:.16em;font-weight:800;
  font-size:.68rem;color:#7ea4ff
}
.project-card h3{margin:10px 0 8px;font-size:1.08rem;line-height:1.25}
.project-card p{margin:0;color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.65}
.nav-links{display:grid;gap:6px}
.nav-links a,.ghost-link{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:13px;color:rgba(255,255,255,.78);
  transition:all .22s ease
}
.nav-links a svg,.ghost-link svg{color:#aec3eb;flex:0 0 auto}
.nav-links a:hover,.nav-links a.is-active,.ghost-link:hover{
  color:#fff;background:rgba(255,255,255,.08)
}
.nav-links a.is-active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sidebar__foot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}

.content-wrap{padding:24px 28px 30px}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-bottom:20px
}
.topbar__left,.topbar__right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar__left h1{margin:3px 0 0;font-size:1.55rem;line-height:1.15;font-weight:800}
.menu-toggle{
  display:none;width:44px;height:44px;border:none;border-radius:14px;background:#fff;color:var(--navy);box-shadow:var(--shadow-soft)
}
.topbar__meta,.user-chip{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow-soft)
}
.topbar__meta{padding:10px 14px;color:var(--muted);font-size:.9rem}
.user-chip{padding:8px 12px}
.user-chip__avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#5d8df4,#6da0ff);color:#fff;font-weight:800;font-size:.9rem
}
.user-chip strong{display:block;font-size:.92rem;line-height:1.1}
.user-chip small{display:block;color:var(--muted);font-size:.78rem;text-transform:capitalize;margin-top:2px}

.btn{
  border:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 15px;border-radius:13px;font-weight:700;line-height:1;transition:.2s ease
}
.btn svg{width:17px;height:17px}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 12px 24px rgba(47,111,237,.2)}
.btn--secondary{background:#fff;border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-soft)}
.btn--ghost{background:var(--surface-muted);border:1px solid var(--border);color:var(--text)}
.btn--danger{background:linear-gradient(135deg,var(--red),#e36d80);color:#fff;box-shadow:0 12px 24px rgba(209,75,94,.18)}
.btn--block{width:100%}

.flash{padding:14px 16px;border-radius:15px;margin-bottom:18px;border:1px solid transparent;font-weight:600}
.flash--success{background:#edf9f3;border-color:#c7ebd8;color:#16724f}
.flash--danger{background:#fff1f4;border-color:#f5c8d1;color:#a53d4d}
.login-flash{max-width:520px;margin:18px auto 0}

.hero-card,.surface-card,.kpi-card,.profile-hero,.login-card,.login-showcase{
  border-radius:var(--radius)
}
.hero-card,.surface-card,.kpi-card,.login-card,.profile-hero{
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)
}
.hero-card{
  display:grid;grid-template-columns:minmax(0,1.4fr) 300px;gap:20px;
  padding:24px;margin-bottom:18px;
  background:
    radial-gradient(circle at top right,rgba(47,111,237,.08),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)
}
.hero-card__content h2{
  margin:10px 0 10px;font-size:2rem;line-height:1.14;font-weight:800;max-width:18ch
}
.hero-card__content p{margin:0;color:var(--muted);line-height:1.72;max-width:60ch;font-size:.97rem}
.hero-card__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-card__panel{
  display:grid;gap:12px;padding:16px;border-radius:18px;
  background:linear-gradient(180deg,#12213a 0%, #1a2844 100%);color:#fff
}
.metric-row{
  display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:14px;
  background:rgba(255,255,255,.05)
}
.metric-row span{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#b1caff;flex:0 0 auto
}
.metric-row strong{display:block;font-size:1.1rem;line-height:1.1;margin-bottom:4px}
.metric-row small{display:block;color:rgba(255,255,255,.68);font-size:.82rem;line-height:1.45}

.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.kpi-card{display:flex;align-items:center;gap:14px;padding:18px}
.kpi-card__icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;flex:0 0 auto}
.kpi-card__icon svg{width:22px;height:22px}
.kpi-card span{display:block;color:var(--muted);font-size:.86rem;margin-bottom:6px;line-height:1.4}
.kpi-card strong{display:block;font-size:1.7rem;line-height:1;margin-bottom:6px;font-weight:800}
.kpi-card small{display:block;color:var(--muted);font-size:.82rem;line-height:1.5}
.is-blue{background:var(--primary-soft);color:var(--primary)}
.is-green{background:var(--green-soft);color:var(--green)}
.is-amber{background:var(--amber-soft);color:var(--amber)}
.is-red{background:var(--red-soft);color:var(--red)}

.layout-two{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(310px,.82fr);gap:18px;margin-bottom:18px}
.surface-card{padding:20px;min-width:0}
.surface-card--dark{background:linear-gradient(180deg,#0f1728,#182235);color:#fff;border:none}
.surface-card--danger{background:linear-gradient(180deg,#fff 0%,#fffafc 100%)}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}
.section-head h3{margin:8px 0 0;font-size:1.14rem;line-height:1.25}
.section-head--light .eyebrow{color:#90b1ff}
.section-head--light h3{color:#fff}
.section-head--responsive{flex-wrap:wrap}
.text-link{color:var(--primary);font-weight:700;font-size:.92rem}

.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:14px 15px;text-align:left;border-bottom:1px solid #edf2f7;vertical-align:top}
thead th{background:#f7f9fc;color:#58708c;font-size:.77rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
tbody tr:hover{background:#fbfdff}
td strong{display:block;font-size:.95rem;line-height:1.35}
td small{display:block;color:var(--muted);margin-top:4px;line-height:1.5;font-size:.82rem}
.empty{text-align:center;color:var(--muted);padding:24px!important}
.table-actions{display:flex;gap:10px;flex-wrap:wrap}
.table-link{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-weight:700;font-size:.9rem}
.table-link svg{width:16px;height:16px}

.status-pill{
  display:inline-flex;align-items:center;justify-content:center;min-height:30px;
  padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.03em;
  border:1px solid transparent
}
.status-valid{background:var(--green-soft);border-color:#cdebdc;color:var(--green)}
.status-warning{background:var(--amber-soft);border-color:#efd7a4;color:#a66a05}
.status-critical,.status-expired{background:var(--red-soft);border-color:#efc0c9;color:#b43b4c}
.status-cancelled,.status-renewed,.status-muted{background:#eef3f8;border-color:#d8e1eb;color:#64758a}

.process-list{display:grid;gap:12px}
.process-list>div{display:grid;grid-template-columns:50px minmax(0,1fr);gap:12px;padding:13px;border-radius:14px;background:rgba(255,255,255,.05)}
.process-list span{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#9dc0ff;font-weight:800}
.process-list strong{display:block;font-size:.96rem;margin-bottom:5px}
.process-list p{margin:0;color:rgba(255,255,255,.72);line-height:1.6;font-size:.9rem}

.filter-grid{display:grid;grid-template-columns:minmax(260px,1.8fr) repeat(2,minmax(170px,1fr)) auto auto;gap:12px;margin-bottom:16px}
.field{display:block}
.field--search{position:relative}
.field--search span{position:absolute;top:50%;left:14px;transform:translateY(-50%);color:#7f90a7}
.field--search input{padding-left:42px}
input,select,textarea{
  width:100%;padding:12px 13px;border-radius:13px;border:1px solid var(--border);
  background:#fff;color:var(--text);outline:none;transition:.2s ease
}
textarea{min-height:114px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#97b6f8;box-shadow:0 0 0 4px rgba(47,111,237,.11)}
label{display:grid;gap:8px;font-weight:700;color:#30445c;font-size:.92rem}

.stack-gap{display:grid;gap:18px}
.form-grid{display:grid;gap:14px}
.form-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-span-all{grid-column:1 / -1}
.footer-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.footer-actions--left{justify-content:flex-start;margin-top:16px}

.profile-hero{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  padding:22px 24px;margin-bottom:18px;
  background:linear-gradient(180deg,#fff 0%,#fcfdff 100%)
}
.profile-hero h2{margin:8px 0 8px;font-size:1.8rem;line-height:1.15}
.profile-hero p{margin:0;color:var(--muted);line-height:1.65}
.profile-hero__meta{text-align:right;display:grid;gap:8px;justify-items:end}
.profile-hero__meta strong{font-size:1.08rem}
.profile-hero__meta small{color:var(--muted)}
.tone-red{border-color:#f2cad1;background:linear-gradient(180deg,#fff 0%,#fff5f7 100%)}
.tone-green{border-color:#d3ecde;background:linear-gradient(180deg,#fff 0%,#f5fcf8 100%)}
.tone-amber{border-color:#f1dfb7;background:linear-gradient(180deg,#fff 0%,#fff8ee 100%)}
.tone-blue{border-color:#d2def5;background:linear-gradient(180deg,#fff 0%,#f5f8ff 100%)}
.tone-gray{border-color:var(--border)}

.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.detail-grid>div{padding:14px;border-radius:15px;background:#fafcff;border:1px solid #e9eef5}
.detail-grid span{display:block;color:var(--muted);font-size:.8rem;margin-bottom:7px}
.detail-grid strong{font-size:.96rem;line-height:1.5}
.card-summary{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start}
.card-thumb{min-height:170px;border-radius:16px;border:1px dashed #cad6e5;background:#f8fbff;display:grid;place-items:center;color:var(--muted);overflow:hidden;padding:12px}
.card-thumb img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.card-summary__content strong{display:block;font-size:1.12rem;margin-bottom:8px}
.card-summary__content p{margin:0 0 8px;color:var(--muted);line-height:1.55}
.empty-box{padding:18px;border-radius:15px;background:#f8fbff;border:1px dashed #cfd9e7;color:var(--muted);margin-bottom:14px;line-height:1.7}

.alert-list{display:grid;gap:12px}
.alert-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:16px;border-radius:16px;border:1px solid var(--border);background:#fff}
.alert-item__label{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eff4fb;color:#627389;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.alert-item h4{margin:0 0 6px;font-size:1rem;line-height:1.3}
.alert-item p{margin:0;color:var(--muted);font-size:.9rem}
.alert-item__date{text-align:right}
.alert-item__date strong{display:block;font-size:.96rem}
.alert-item__date small{color:var(--muted);font-size:.82rem}
.alert-item.is-warning{border-color:#f1ddb3;background:#fffaf1}
.alert-item.is-critical,.alert-item.is-expired{border-color:#f1c4cc;background:#fff6f7}
.alert-item.is-valid{border-color:#d1ecd9;background:#f6fcf8}

.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.report-card{display:grid;gap:9px;padding:18px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:var(--shadow-soft);transition:.22s ease}
.report-card:hover{transform:translateY(-2px);border-color:#c7d8f3}
.report-card svg{width:22px;height:22px;color:var(--primary)}
.report-card strong{font-size:1rem;line-height:1.35}
.report-card span{color:var(--muted);line-height:1.62;font-size:.9rem}

.timeline{display:grid;gap:12px}
.timeline-item{display:grid;grid-template-columns:16px minmax(0,1fr);gap:14px;align-items:start}
.timeline-dot{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#83aefe);box-shadow:0 0 0 6px rgba(47,111,237,.1);margin-top:6px}
.timeline-body{padding:15px 16px;border-radius:16px;border:1px solid var(--border);background:#fff}
.timeline-body strong{display:block;margin-bottom:6px;font-size:.96rem}
.timeline-body p{margin:0 0 8px;color:var(--text);line-height:1.65;font-size:.92rem}
.timeline-body small{color:var(--muted);font-size:.82rem}

.modal{position:fixed;inset:0;background:rgba(12,20,34,.58);display:none;align-items:center;justify-content:center;padding:20px;z-index:70}
.modal.show{display:flex}
.modal-card{position:relative;width:min(760px,100%);max-height:min(90vh,820px);overflow:auto;background:#fff;border-radius:22px;padding:24px;border:1px solid var(--border);box-shadow:0 28px 64px rgba(10,20,34,.22)}
.modal-card--small{width:min(520px,100%)}
.modal-card h3{margin:10px 0 10px;font-size:1.38rem;line-height:1.25}
.modal-card p{margin:0 0 18px;color:var(--muted);line-height:1.7}
.modal-close{position:absolute;top:15px;right:15px;width:38px;height:38px;border:none;border-radius:12px;background:#f2f6fb;color:#30445c;display:grid;place-items:center}

.login-screen{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);background:linear-gradient(180deg,#f4f8fd 0%,#eef3f9 100%)}
.login-showcase{
  padding:54px 5.8vw;
  color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 20% 16%,rgba(85,136,255,.18),transparent 28%),
    radial-gradient(circle at 80% 18%,rgba(123,170,255,.12),transparent 20%),
    linear-gradient(180deg,#101a2d 0%,#16243a 100%)
}
.login-showcase::after{content:"";position:absolute;right:-110px;bottom:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(116,166,255,.2),transparent 65%)}
.showcase-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);width:max-content;color:#d5e3ff}
.showcase-badge svg{color:#9dc0ff}
.login-showcase h2{margin:18px 0 14px;font-size:2.3rem;line-height:1.08;max-width:15ch}
.login-showcase p{max-width:58ch;color:rgba(255,255,255,.74);line-height:1.82;font-size:.98rem}
.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.showcase-grid>div{padding:16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.showcase-grid strong{display:block;font-size:1.45rem;color:#fff;margin-bottom:6px}
.showcase-grid span{color:rgba(255,255,255,.72);font-size:.86rem}
.showcase-note{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;margin-top:22px;padding:17px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.showcase-note>span{width:52px;height:52px;border-radius:15px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#9dc0ff}
.showcase-note strong{display:block;font-size:.98rem;margin-bottom:6px}
.showcase-note p{margin:0;color:rgba(255,255,255,.72);font-size:.92rem}
.login-card{margin:auto;width:min(470px,calc(100% - 32px));padding:28px}
.login-card__head h1{margin:18px 0 10px;font-size:1.78rem;line-height:1.15}
.login-card__head p{margin:0 0 18px;color:var(--muted);line-height:1.72}
.brand--login .brand__text small{color:var(--muted)}
.form-stack{display:grid;gap:15px}
.helper-note{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);display:grid;gap:4px}
.helper-note strong{font-size:.9rem}
.helper-note small{color:var(--muted);line-height:1.55}

@media (max-width:1200px){
  .hero-card{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout-two{grid-template-columns:1fr}
  .form-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login-screen{grid-template-columns:1fr}
  .login-showcase{min-height:430px}
}
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:80;width:min(300px,86vw);transform:translateX(-104%);transition:.25s ease}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(10,16,28,.42);z-index:60}
  .sidebar__close,.menu-toggle{display:grid;place-items:center}
  .content-wrap{padding:18px}
  .topbar{align-items:flex-start}
  .topbar__right{justify-content:flex-start}
  .filter-grid{grid-template-columns:1fr 1fr}
  .filter-grid>*:first-child{grid-column:1 / -1}
}
@media (max-width:720px){
  .content-wrap{padding:15px}
  .topbar__left h1{font-size:1.34rem}
  .topbar__meta{display:none}
  .hero-card,.surface-card,.profile-hero,.login-card{padding:18px}
  .hero-card__content h2,.profile-hero h2,.login-showcase h2{font-size:1.7rem}
  .kpi-grid,.report-grid,.showcase-grid,.detail-grid,.form-grid--three,.form-grid--two{grid-template-columns:1fr}
  .filter-grid{grid-template-columns:1fr}
  .alert-item{grid-template-columns:1fr}
  .alert-item__date{text-align:left}
  .profile-hero{align-items:flex-start;flex-direction:column}
  .profile-hero__meta{text-align:left;justify-items:start}
  .card-summary{grid-template-columns:1fr}
  .login-showcase{padding:36px 24px;min-height:auto}
  .login-card{width:min(100%,calc(100% - 24px));margin:18px auto 28px}
}