:root{
  --bg:#f3f6fb;--card:#ffffff;--border:#e2e8f0;--text:#0f172a;--muted:#64748b;
  --primary:#0f172a;--primary-2:#0ea5e9;--green:#10b981;--danger:#ef4444;
  --soft:#f8fafc;--shadow:0 12px 40px rgba(15,23,42,.08);--radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Tahoma,Arial,sans-serif;background:
radial-gradient(circle at top right,#e0f2fe 0,#f3f6fb 30%,#f3f6fb 100%);color:var(--text)}
a{text-decoration:none;color:inherit}
.page-shell{max-width:1280px;margin:auto;padding:16px}
.hero{
  background:linear-gradient(135deg,#0ea5e9,#06b6d4,#10b981);
  color:#fff;border-radius:32px;padding:22px;box-shadow:var(--shadow);margin-bottom:18px;
  animation:fadeUp .55s ease both;
}
.hero-badge{display:inline-block;background:rgba(255,255,255,.16);padding:8px 14px;border-radius:999px;font-size:13px;margin-bottom:14px;backdrop-filter:blur(8px)}
.hero-row{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.hero h1{margin:0 0 8px;font-size:clamp(28px,4vw,42px);line-height:1.25}
.hero p{margin:0;max-width:760px;line-height:1.9;font-size:15px}
.hero-mini-grid{display:grid;grid-template-columns:1fr;gap:10px;min-width:250px}
.mini-card{background:rgba(255,255,255,.14);padding:14px 16px;border-radius:18px;backdrop-filter:blur(8px)}
.mini-card span{display:block;font-size:12px;opacity:.85;margin-bottom:4px}
.tabs,.subnav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.tab{
  padding:12px 18px;border-radius:18px;background:#fff;border:1px solid var(--border);
  font-weight:700;transition:.25s transform,.25s background,.25s color,.25s box-shadow
}
.tab:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tab.active{background:var(--primary);color:#fff}
.content{display:block}
.grid-4,.grid-3,.grid-2,.form-grid,.info-grid,.tasks,.list-grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.form-grid{grid-template-columns:repeat(2,1fr)}
.info-grid{grid-template-columns:repeat(3,1fr)}
.tasks{grid-template-columns:repeat(3,1fr)}
.list-grid{grid-template-columns:repeat(2,1fr)}
.card,.client-card,.task-box,.info-box,.row-box,.preview-card{
  background:var(--card);border:1px solid rgba(226,232,240,.9);border-radius:var(--radius);
  box-shadow:var(--shadow);animation:fadeUp .45s ease both;
}
.card{padding:18px}
.client-card{padding:16px;margin-bottom:14px;background:rgba(248,250,252,.75)}
.task-box,.info-box,.row-box{padding:12px}
.preview-card{padding:14px;overflow:hidden}
.stat-card{position:relative;overflow:hidden}
.stat-card:before{
  content:"";position:absolute;inset:auto -30px -30px auto;width:110px;height:110px;border-radius:999px;
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(16,185,129,.14));
}
.stat-card .num{font-size:clamp(28px,4vw,38px);font-weight:800;margin:8px 0}
.muted{color:var(--muted)} .small{font-size:13px}
.field label{display:block;margin-bottom:7px;font-size:14px;font-weight:700}
.field input,.field select,.field textarea,form input,form select{
  width:100%;padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:var(--soft);font-size:14px;
  outline:none;transition:.2s border-color,.2s box-shadow,.2s transform
}
.field input:focus,.field select:focus,.field textarea:focus,form input:focus,form select:focus{
  border-color:#7dd3fc;box-shadow:0 0 0 4px rgba(14,165,233,.1)
}
.field textarea{min-height:110px;resize:vertical}
.btn{
  display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:none;
  padding:12px 16px;border-radius:16px;font-weight:700;cursor:pointer;transition:.25s transform,.25s opacity,.25s box-shadow
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn.soft{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn.green{background:linear-gradient(135deg,#10b981,#059669)}
.btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626)}
.btn.full{width:100%}
.split{display:grid;grid-template-columns:400px 1fr;gap:18px;align-items:start}
.client-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,#dcfce7,#bbf7d0);
  color:#166534;font-size:12px;font-weight:700
}
.task-box h4{margin:0 0 4px;font-size:16px}
.task-box .sub{font-size:12px;color:var(--muted);margin-bottom:10px}
.stack{display:grid;gap:8px}
.search-box{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--border)}
.kv:last-child{border-bottom:none}
.preview-card img,.preview-top{
  width:100%;height:190px;object-fit:cover;border-radius:18px;
}
.preview-top{
  background:linear-gradient(135deg,#e2e8f0,#f8fafc);display:flex;align-items:center;justify-content:center;color:#64748b
}
.notice{padding:12px 14px;background:#ecfeff;border:1px solid #a5f3fc;color:#155e75;border-radius:16px;margin-bottom:14px}
.bar-wrap{height:10px;background:#eef2f7;border-radius:999px;overflow:hidden;margin-top:10px}
.bar{height:10px;border-radius:999px;background:linear-gradient(135deg,#0ea5e9,#10b981)}
.analytics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.section-title{margin:0 0 12px}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

@media (max-width: 1000px){
  .split,.grid-4,.grid-3,.grid-2,.tasks,.info-grid,.list-grid,.form-grid,.analytics-grid{grid-template-columns:1fr}
  .page-shell{padding:12px}
  .hero{padding:18px;border-radius:24px}
  .hero-mini-grid{min-width:unset;width:100%}
  .tabs,.subnav{position:sticky;top:0;z-index:20;background:rgba(243,246,251,.92);backdrop-filter:blur(8px);padding:8px 0}
  .tab{flex:1;text-align:center;padding:11px 12px;font-size:14px}
  .search-box form,.search-box input{width:100%}
  .search-box{align-items:stretch}
}