:root{
  --bg:#edf5f8;
  --bg-deep:#dcebf2;
  --surface:#ffffff;
  --surface-soft:rgba(255,255,255,.9);
  --surface-strong:#f4fbff;
  --work-surface:#e9f5fb;
  --text:#0f2738;
  --text-soft:#567184;
  --line:#cfe0e7;
  --line-strong:#bad0d8;
  --primary:#1c6fd8;
  --primary-deep:#124f9c;
  --primary-soft:#e3efff;
  --success:#11856a;
  --success-soft:#e5f8f0;
  --menu:#113b6f;
  --menu-deep:#0b2749;
  --menu-hover:#19508f;
  --menu-line:rgba(255,255,255,.08);
  --warning:#d98825;
  --danger:#ca3d5d;
  --danger-soft:#fff0f3;
  --shadow-lg:0 28px 60px rgba(18,73,96,.14);
  --shadow-md:0 14px 32px rgba(17,69,92,.1);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:"Segoe UI",Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(28,111,216,.08), transparent 28%),
    radial-gradient(circle at top right, rgba(17,133,106,.1), transparent 30%),
    linear-gradient(180deg, #f7fcff 0%, var(--bg) 42%, var(--bg-deep) 100%);
  padding:24px;
}

a{
  color:var(--primary);
  text-decoration:none;
}

a:hover{
  color:var(--primary-deep);
}

.admin-shell{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:100vh;
  width:min(1680px, calc(100vw - 48px));
  margin:0 auto;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.82);
  border-radius:40px;
  overflow:hidden;
  box-shadow:0 32px 90px rgba(24,70,110,.14);
  backdrop-filter:blur(18px);
}

.sidebar{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:26px;
  padding:28px 22px 24px;
  color:#fff;
  background:
    radial-gradient(circle at 16% 16%, rgba(68,154,255,.18), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(27,203,180,.1), transparent 22%),
    linear-gradient(180deg, var(--menu-deep) 0%, var(--menu) 42%, #1b5ea8 100%);
  box-shadow:inset -1px 0 0 var(--menu-line);
}

.sidebar::after{
  content:"";
  position:absolute;
  inset:18px 16px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:24px;
  pointer-events:none;
}

.brand-block{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 10px 4px;
}

.brand-block strong{
  display:block;
  font-size:1.02rem;
  letter-spacing:.01em;
}

.brand-block span{
  display:block;
  margin-top:3px;
  color:rgba(228,245,255,.76);
  font-size:.88rem;
}

.brand-badge{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  font-size:1.2rem;
  font-weight:800;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    linear-gradient(145deg, #1f74dc, #27bf8f);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    0 14px 28px rgba(4,18,44,.24);
}

.brand-block.compact{margin-bottom:18px}

.sidebar-nav{
  position:relative;
  z-index:1;
  display:grid;
  gap:8px;
}

.sidebar-nav a{
  display:grid;
  grid-template-columns:40px 1fr;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:10px 12px;
  border-radius:16px;
  color:rgba(239,248,255,.94);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.04);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.sidebar-nav a:hover{
  transform:translateX(3px);
  background:rgba(255,255,255,.12);
  border-color:rgba(103,176,255,.34);
  box-shadow:0 10px 22px rgba(4,18,44,.16);
  color:#fff;
}

.nav-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.08);
  color:#d8fff3;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.sidebar-nav a:hover .nav-icon{
  background:linear-gradient(135deg, rgba(39,191,143,.28), rgba(28,111,216,.24));
  color:#fff;
}

.nav-copy{
  min-width:0;
}

.nav-copy strong{
  display:block;
  font-size:.93rem;
  font-weight:700;
  color:inherit;
  line-height:1.2;
}

.nav-copy small{
  display:block;
  margin-top:3px;
  color:rgba(223,243,236,.68);
  font-size:.76rem;
  line-height:1.25;
}

.content{
  padding:34px;
  min-width:0;
  background:
    linear-gradient(180deg, rgba(248,252,255,.82), rgba(236,246,251,.84)),
    radial-gradient(circle at top right, rgba(64,170,255,.08), transparent 22%);
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
  flex-wrap:wrap;
}

.dashboard-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(280px, .72fr);
  gap:20px;
  margin-bottom:22px;
}

.dashboard-hero-main,
.dashboard-hero-side,
.dashboard-widget,
.chart-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.78);
  border-radius:30px;
  box-shadow:var(--shadow-md);
}

.dashboard-hero-main{
  padding:28px 28px 24px;
  color:#fff;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 30%),
    linear-gradient(135deg, #1255b7 0%, #2f79e2 46%, #2ebba2 100%);
}

.dashboard-hero-main::after{
  content:"";
  position:absolute;
  inset:auto -80px -100px auto;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.24), rgba(255,255,255,0));
  pointer-events:none;
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 14px;
  border-radius:999px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.18);
}

.hero-heading-row{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  margin:18px 0 26px;
  flex-wrap:wrap;
}

.hero-heading-row h1{
  margin:0 0 10px;
  font-size:clamp(2rem, 2.3vw, 2.9rem);
  line-height:1;
  letter-spacing:-.04em;
}

.hero-heading-row p{
  max-width:700px;
  margin:0;
  color:rgba(240,247,255,.86);
  line-height:1.7;
}

.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.dashboard-hero .btn.ghost{
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}

.dashboard-hero .btn.ghost:hover{
  color:#fff;
  background:rgba(255,255,255,.18);
}

.hero-kpi-band{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) repeat(2, minmax(180px, 1fr));
  gap:16px;
}

.hero-kpi{
  min-height:156px;
  padding:20px 22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
}

.hero-kpi-primary{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
}

.hero-kpi-soft{
  background:rgba(8,31,74,.16);
}

.hero-kpi span,
.hero-side-label{
  display:block;
  color:rgba(239,247,255,.72);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hero-kpi strong{
  display:block;
  margin:12px 0 10px;
  font-size:clamp(1.8rem, 2vw, 2.8rem);
  line-height:1;
  letter-spacing:-.04em;
}

.hero-kpi small{
  display:block;
  color:rgba(239,247,255,.82);
  line-height:1.55;
}

.hero-progress{
  height:10px;
  margin-top:18px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

.hero-progress div{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #7fe0c6, #ffffff);
}

.dashboard-hero-side{
  padding:22px;
  background:linear-gradient(180deg, rgba(247,252,255,.96), rgba(235,246,252,.96));
}

.hero-side-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
  padding:6px;
}

.hero-side-card strong{
  font-size:clamp(2rem, 2.2vw, 2.7rem);
  line-height:1;
  letter-spacing:-.04em;
}

.hero-side-card p,
.panel-subtext{
  margin:0;
  color:var(--text-soft);
  line-height:1.6;
}

.mini-donut{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:14px;
  align-items:center;
  margin-top:auto;
}

.mini-donut-ring{
  --fill:50;
  position:relative;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #fff 55%, transparent 57%),
    conic-gradient(#1f72dd calc(var(--fill) * 1%), #2ebba2 0, rgba(217,232,239,.86) 0);
}

.mini-donut-ring span{
  color:var(--text);
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.03em;
}

.mini-donut-copy strong{
  display:block;
  margin-bottom:6px;
  font-size:1rem;
}

.mini-donut-copy small{
  color:var(--text-soft);
  line-height:1.55;
}

.dashboard-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  margin-bottom:22px;
}

.dashboard-widget{
  min-height:160px;
  padding:20px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,252,255,.96));
}

.dashboard-widget strong{
  display:block;
  margin:18px 0 12px;
  font-size:clamp(1.75rem, 2vw, 2.4rem);
  line-height:1;
  letter-spacing:-.04em;
}

.widget-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.widget-header span{
  color:var(--text-soft);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.widget-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:linear-gradient(135deg, #1f72dd, #2ebba2);
  box-shadow:0 0 0 6px rgba(31,114,221,.08);
}

.widget-mint{background:linear-gradient(180deg, #eefbf4, #fbfffc)}
.widget-amber{background:linear-gradient(180deg, #fff7e7, #fffdf8)}
.widget-ice{background:linear-gradient(180deg, #f2f9ff, #fdfefe)}
.widget-sand{background:linear-gradient(180deg, #fff6ec, #fffdf8)}
.widget-lilac{background:linear-gradient(180deg, #f8f2ff, #fdfcff)}
.widget-white{background:linear-gradient(180deg, #ffffff, #f8fcff)}

.widget-blue{
  color:#fff;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, #5f9bf0 0%, #3c7adf 58%, #3ca9d7 100%);
}

.widget-blue .widget-header span,
.widget-blue p,
.widget-blue strong{
  color:#fff;
}

.widget-blue .widget-dot{
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.12);
}

.feature-widget p{
  margin:0 0 14px;
  max-width:260px;
  color:rgba(255,255,255,.86);
  line-height:1.55;
}

.spark-bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:52px;
  margin-top:auto;
}

.spark-bars span{
  flex:1;
  min-width:10px;
  border-radius:999px 999px 4px 4px;
  background:linear-gradient(180deg, rgba(46,187,162,.95), rgba(31,114,221,.88));
}

.progress-chip{
  display:grid;
  gap:8px;
  margin-top:auto;
}

.progress-chip label{
  color:var(--text-soft);
  font-size:.78rem;
  font-weight:700;
}

.progress-chip.light label{
  color:rgba(255,255,255,.76);
}

.progress-chip div{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(22,78,138,.08);
}

.progress-chip.light div{
  background:rgba(255,255,255,.18);
}

.progress-chip span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #1f72dd, #2ebba2);
}

.progress-chip.light span{
  background:linear-gradient(90deg, rgba(255,255,255,.92), rgba(127,224,198,.96));
}

.spark-line{
  height:54px;
  margin-top:auto;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(28,111,216,.08), rgba(28,111,216,0)),
    linear-gradient(135deg, transparent 0 18%, rgba(49,115,222,.3) 18% 22%, transparent 22% 38%, rgba(46,187,162,.42) 38% 43%, transparent 43% 58%, rgba(49,115,222,.3) 58% 63%, transparent 63% 78%, rgba(46,187,162,.42) 78% 84%, transparent 84% 100%);
}

.dashboard-workboard{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  gap:22px;
}

.dashboard-analytics-panel{
  grid-column:1 / -1;
}

.analytics-grid{
  display:grid;
  grid-template-columns:1.3fr .72fr .72fr;
  gap:18px;
}

.chart-card{
  padding:20px;
  background:linear-gradient(180deg, #f9fdff, #eef7fc);
}

.chart-card h3{
  margin:0 0 16px;
  font-size:1rem;
  letter-spacing:-.02em;
}

.chart-card-wide{
  padding-bottom:16px;
}

.chart-legend{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:18px;
  color:var(--text-soft);
  font-size:.9rem;
}

.chart-legend span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
}

.legend-dot.income{background:#1f72dd}
.legend-dot.expense{background:#7b71f0}

.bar-chart{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  align-items:end;
  min-height:220px;
  padding:18px 10px 10px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(241,248,253,.96)),
    repeating-linear-gradient(to top, rgba(181,206,220,.28) 0 1px, transparent 1px 54px);
}

.bar-group{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:end;
  justify-items:stretch;
  min-height:200px;
}

.bar-group span,
.bar-group i{
  display:block;
  align-self:end;
  border-radius:16px 16px 6px 6px;
}

.bar-group span{
  background:linear-gradient(180deg, #66a1f1, #2b74dc);
}

.bar-group i{
  background:linear-gradient(180deg, #a391ff, #7467f1);
}

.bar-group label{
  grid-column:1 / -1;
  margin-top:8px;
  text-align:center;
  color:var(--text-soft);
  font-size:.82rem;
  font-weight:700;
}

.radial-score{
  --score:60;
  position:relative;
  width:140px;
  height:140px;
  display:grid;
  place-items:center;
  margin:8px auto 14px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #fff 57%, transparent 59%),
    conic-gradient(#1f72dd calc(var(--score) * 1%), #2ebba2 0, rgba(210,226,235,.84) 0);
}

.radial-score span{
  font-size:1.28rem;
  font-weight:800;
  letter-spacing:-.03em;
}

.metric-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.metric-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 15px;
  border-radius:18px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(28,111,216,.08);
}

.metric-list span{
  color:var(--text-soft);
  font-weight:700;
}

.metric-list strong{
  margin:0;
  font-size:1.1rem;
}

.finance-kpi-grid,
.partner-kpi-grid,
.community-kpi-grid{
  margin-bottom:24px;
}

.action-cell{
  min-width:280px !important;
}

.action-cell form{
  min-width:240px;
}

.dashboard-table-panel{
  min-width:0;
}

.dashboard-table-panel .table tbody td:first-child strong a{
  font-size:1rem;
}

.panel-subtext strong{
  color:var(--text);
}

.topbar h1{
  margin:0 0 6px;
  font-size:clamp(1.75rem, 2vw, 2.35rem);
  line-height:1.05;
  letter-spacing:-.03em;
  word-break:break-word;
}

.topbar p{
  margin:0;
  max-width:760px;
  color:var(--text-soft);
  font-size:1rem;
  line-height:1.6;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  margin-bottom:24px;
}

.stat-card,
.panel{
  position:relative;
  overflow:hidden;
  background:var(--surface-soft);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.76);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
}

.stat-card::before,
.panel::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(19,87,197,.28), rgba(22,160,133,.22), transparent 72%);
}

.stat-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:148px;
  padding:22px 24px;
}

.stats-grid .stat-card:nth-child(1){
  background:linear-gradient(180deg, #edf9f3, #f8fdf9);
}

.stats-grid .stat-card:nth-child(2){
  background:linear-gradient(180deg, #fff7e8, #fffdf7);
}

.stats-grid .stat-card:nth-child(3){
  color:#fff;
  background:linear-gradient(145deg, #65a0ee, #4586e7 58%, #4aa6d9 100%);
}

.stats-grid .stat-card:nth-child(3) span,
.stats-grid .stat-card:nth-child(3) strong{
  color:#fff;
}

.stats-grid .stat-card:nth-child(4){
  background:linear-gradient(180deg, #f4fbff, #fbfdff);
}

.stats-grid .stat-card:nth-child(5){
  background:linear-gradient(180deg, #fff7ef, #fffdf8);
}

.stats-grid .stat-card:nth-child(6){
  background:linear-gradient(180deg, #f8f4ff, #fdfcff);
}

.stat-card span{
  display:block;
  margin-bottom:10px;
  color:var(--text-soft);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.45;
}

.stat-card strong{
  display:block;
  font-size:clamp(1.45rem, 1.55vw, 2.1rem);
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--text);
  word-break:break-word;
  overflow-wrap:anywhere;
}

.panel{
  padding:24px;
  margin-bottom:24px;
}

.panel.large{
  min-height:320px;
}

.panel > form,
.panel .message-box,
.panel .detail-list,
.panel .table{
  position:relative;
  z-index:1;
}

.panel form{
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(232,246,252,.95), rgba(242,250,255,.96));
  border:1px solid rgba(28,111,216,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

.panel-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.panel-header h2{
  margin:0;
  font-size:1.16rem;
  letter-spacing:-.02em;
  line-height:1.3;
  word-break:break-word;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  display:block;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}

.table thead,
.table tbody{
  width:100%;
}

.table thead th{
  padding:0 12px 12px;
  color:var(--text-soft);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-align:left;
  border-bottom:1px solid var(--line);
}

.table tbody td{
  padding:14px 12px;
  border-bottom:1px solid rgba(215,230,237,.8);
  text-align:left;
  vertical-align:top;
  min-width:120px;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.table-muted{
  display:inline-block;
  margin-top:4px;
  color:var(--text-soft);
  font-size:.8rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.table tbody tr:last-child td{
  border-bottom:none;
}

.table tbody tr:hover td{
  background:rgba(19,87,197,.025);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 11px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--primary-soft), #f4f8ff);
  color:var(--primary-deep);
  border:1px solid rgba(19,87,197,.12);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border:0;
  border-radius:14px;
  padding:12px 16px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-align:center;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn.primary{
  color:#fff;
  background:linear-gradient(135deg, var(--primary), #2176dd 58%, #1ba6a0 120%);
  box-shadow:0 16px 28px rgba(19,87,197,.22);
}

.btn.primary:hover{
  box-shadow:0 18px 34px rgba(19,87,197,.28);
}

.btn.ghost{
  color:var(--text);
  background:linear-gradient(180deg, #fafcff, #eef5f9);
  border:1px solid var(--line);
}

.btn.full{width:100%}

.filter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  align-items:end;
}

.filter-grid input,
.filter-grid select,
.field-wrap input,
.field-wrap select,
.field-wrap textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #bfd7e2;
  border-radius:14px;
  background:linear-gradient(180deg, #f3fbff, #ffffff);
  color:var(--text);
  font:inherit;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.filter-grid input:focus,
.filter-grid select:focus,
.field-wrap input:focus,
.field-wrap select:focus,
.field-wrap textarea:focus{
  border-color:rgba(19,87,197,.38);
  box-shadow:0 0 0 4px rgba(19,87,197,.1);
  background:#fff;
}

.field-wrap{
  margin-bottom:14px;
  min-width:0;
}

.field-wrap label{
  display:block;
  margin-bottom:8px;
  color:var(--text);
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}

.notes-panel{grid-column:1 / -1}

.detail-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px;
  margin:0 0 20px;
}

.detail-list div{
  padding:14px 16px;
  border:1px solid rgba(19,87,197,.08);
  border-radius:18px;
  background:linear-gradient(180deg, #edf8fd, var(--surface-strong));
  min-width:0;
}

.detail-list dt{
  margin-bottom:5px;
  color:var(--text-soft);
  font-size:.77rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.detail-list dd{
  margin:0;
  font-weight:700;
  color:var(--text);
  line-height:1.5;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.message-box{
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg, #eef8fd, #f7fcff);
  border:1px solid #cfe1ea;
  white-space:pre-wrap;
}

.notes-list{
  display:grid;
  gap:12px;
  margin-top:18px;
}

.note-card{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, #edf8fd, #f8fcff);
  border:1px solid #d3e4eb;
}

.note-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:8px;
  color:var(--text-soft);
  font-size:.9rem;
}

.alert{
  padding:14px 16px;
  border-radius:16px;
  margin-bottom:16px;
  border:1px solid transparent;
}

.alert.error{
  background:linear-gradient(180deg, #fff7f8, var(--danger-soft));
  color:#98263f;
  border-color:#ffd5de;
}

.alert.info{
  background:linear-gradient(180deg, #f3f9ff, #eaf6ff);
  color:var(--primary-deep);
  border-color:#cfe3ff;
}

.login-body{
  display:grid;
  place-items:center;
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(29,127,255,.24), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(29,199,177,.18), transparent 24%),
    linear-gradient(160deg, #07254d 0%, #0b4e84 48%, #0d716e 100%);
}

.login-card{
  width:min(480px,92vw);
  padding:34px;
  border-radius:32px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 36px 80px rgba(3,21,47,.28);
}

.login-card h1{
  margin:12px 0 8px;
  font-size:2rem;
  letter-spacing:-.03em;
}

.login-card p{
  margin-top:0;
  color:var(--text-soft);
}

.login-note{
  margin-top:16px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg, #fbfeff, #eff8fb);
  border:1px solid var(--line);
  font-size:.92rem;
  color:var(--text-soft);
}

form .btn + .btn{
  margin-left:8px;
}

.panel > form{
  max-width:100%;
}

.panel.nested{
  margin-bottom:0;
}

.panel-grid.two,
.field-grid.two{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.field-stack{
  display:grid;
  gap:14px;
}

.checkbox-line{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-weight:700;
  font-size:.94rem;
}

.checkbox-line input{
  width:auto;
}

.panel table form{
  display:grid;
  gap:10px;
  min-width:220px;
  max-width:280px;
  padding:14px;
  background:linear-gradient(180deg, #edf8fd, #f7fcff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.panel table form .field-wrap{
  margin-bottom:0;
}

.panel table input,
.panel table select,
.panel table textarea,
.panel table button{
  width:100%;
}

.panel table .btn{
  min-height:40px;
  padding:10px 14px;
}

#payments-batch-form,
#payouts-batch-form{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  align-items:end;
  margin-bottom:20px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg, #eaf7fd, #f4fbff);
}

#payments-batch-form .btn,
#payouts-batch-form .btn{
  width:100%;
  margin-bottom:0 !important;
}

.message-box,
.alert,
.note-card,
.detail-list div,
.panel td,
.panel th{
  overflow-wrap:anywhere;
}

@media (max-width: 1180px){
  .dashboard-hero,
  .dashboard-workboard,
  .analytics-grid{
    grid-template-columns:1fr;
  }

  .hero-kpi-band,
  .dashboard-kpi-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .detail-grid{
    grid-template-columns:1fr;
  }

  .panel-grid.two,
  .field-grid.two{
    grid-template-columns:1fr;
  }
}

@media (max-width: 980px){
  .admin-shell{
    grid-template-columns:1fr;
    width:min(100%, calc(100vw - 24px));
    border-radius:28px;
  }

  .sidebar{
    padding-bottom:18px;
  }

  .sidebar::after{
    inset:14px 14px auto;
    height:auto;
    bottom:14px;
  }

  .stats-grid,
  .detail-grid{
    grid-template-columns:1fr;
  }

  .hero-heading-row{
    flex-direction:column;
  }

  .panel table form{
    min-width:180px;
  }
}

@media (max-width: 720px){
  body{
    padding:12px;
  }

  .content{
    padding:18px;
  }

  .topbar{
    flex-direction:column;
  }

  .topbar h1{
    font-size:1.7rem;
  }

  .filter-grid,
  .detail-list{
    grid-template-columns:1fr;
  }

  .hero-kpi-band,
  .dashboard-kpi-grid,
  .mini-donut{
    grid-template-columns:1fr;
  }

  .bar-chart{
    gap:12px;
  }

  .panel,
  .stat-card{
    border-radius:22px;
  }

  .table thead th,
  .table tbody td{
    padding-left:10px;
    padding-right:10px;
  }
}

@media (max-width: 560px){
  .stats-grid{
    grid-template-columns:1fr;
  }

  .sidebar-nav a{
    min-height:42px;
  }
}