/* =========================================================
   DELCUBATOR UI KIT v1 — Neutral Core Design System
   ========================================================= */

:root{
  --dc-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dc-font-serif: Georgia, "Times New Roman", serif;
  --dc-bg: #f7f8fb;
  --dc-surface: #ffffff;
  --dc-surface-2: #f1f3f7;
  --dc-text: #151821;
  --dc-muted: #69707d;
  --dc-border: rgba(20,24,33,.10);
  --dc-primary: #3657ff;
  --dc-primary-contrast: #ffffff;
  --dc-success: #138a5b;
  --dc-warning: #b87413;
  --dc-danger: #cb3344;
  --dc-info: #3468d4;
  --dc-radius-xs: 6px;
  --dc-radius-sm: 10px;
  --dc-radius-md: 16px;
  --dc-radius-lg: 24px;
  --dc-radius-xl: 32px;
  --dc-shadow-xs: 0 1px 2px rgba(15,20,30,.04);
  --dc-shadow-sm: 0 10px 30px rgba(20,25,35,.07);
  --dc-shadow-md: 0 22px 60px rgba(20,25,35,.10);
  --dc-shadow-lg: 0 30px 100px rgba(20,25,35,.16);
  --dc-ease: cubic-bezier(.22,1,.36,1);
  --dc-fast: 160ms;
  --dc-normal: 280ms;
  --dc-slow: 560ms;
  --dc-container: 1180px;
  --dc-control-h: 44px;
}

/* RESET */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--dc-font-sans);
  background:var(--dc-bg);
  color:var(--dc-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
table{border-collapse:collapse;width:100%}
[hidden]{display:none!important}

/* ACCESSIBILITY */
:focus-visible{
  outline:3px solid color-mix(in srgb,var(--dc-primary) 35%, transparent);
  outline-offset:2px;
}
.dc-sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}

/* LAYOUT */
.dc-container{width:min(var(--dc-container),calc(100% - 32px));margin-inline:auto}
.dc-container-wide{width:min(1440px,calc(100% - 32px));margin-inline:auto}
.dc-section{padding:80px 0}
.dc-section-sm{padding:48px 0}
.dc-stack{display:flex;flex-direction:column;gap:16px}
.dc-row{display:flex;align-items:center;gap:12px}
.dc-wrap{flex-wrap:wrap}
.dc-between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dc-center{display:grid;place-items:center}
.dc-grid{display:grid;gap:20px}
.dc-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dc-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dc-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dc-grid-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.dc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:36px;align-items:center}
.dc-cluster{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dc-spacer{flex:1}
.dc-divider{height:1px;background:var(--dc-border)}
.dc-hidden-mobile{display:block}
.dc-only-mobile{display:none}

/* TYPOGRAPHY */
.dc-display{
  font-size:clamp(3rem,7vw,6.4rem);
  line-height:.95;
  letter-spacing:-.055em;
  font-weight:850;
}
.dc-h1{font-size:clamp(2.4rem,5vw,4.6rem);line-height:1;letter-spacing:-.045em;font-weight:830}
.dc-h2{font-size:clamp(1.9rem,3.3vw,3.2rem);line-height:1.08;letter-spacing:-.035em;font-weight:800}
.dc-h3{font-size:1.35rem;line-height:1.2;font-weight:760}
.dc-lead{font-size:1.12rem;line-height:1.75;color:var(--dc-muted)}
.dc-muted{color:var(--dc-muted)}
.dc-kicker{
  text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:850;
  color:var(--dc-primary)
}
.dc-label{font-size:.84rem;font-weight:750;color:var(--dc-text)}
.dc-caption{font-size:.78rem;color:var(--dc-muted)}
.dc-serif{font-family:var(--dc-font-serif)}
.dc-balance{text-wrap:balance}

/* SURFACES */
.dc-card{
  background:var(--dc-surface);
  border:1px solid var(--dc-border);
  border-radius:var(--dc-radius-md);
  box-shadow:var(--dc-shadow-xs);
}
.dc-card-soft{background:var(--dc-surface-2);border-radius:var(--dc-radius-md)}
.dc-card-elevated{box-shadow:var(--dc-shadow-md)}
.dc-card-pad{padding:22px}
.dc-panel{
  background:var(--dc-surface);
  border:1px solid var(--dc-border);
  border-radius:var(--dc-radius-lg);
  box-shadow:var(--dc-shadow-sm);
}
.dc-hover-lift{transition:transform var(--dc-normal) var(--dc-ease),box-shadow var(--dc-normal) var(--dc-ease)}
.dc-hover-lift:hover{transform:translateY(-5px);box-shadow:var(--dc-shadow-md)}

/* BUTTONS */
.dc-btn{
  min-height:var(--dc-control-h);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--dc-radius-sm);
  padding:0 18px;border:1px solid transparent;
  font-weight:760;line-height:1;
  transition:transform var(--dc-fast),background var(--dc-fast),border-color var(--dc-fast),box-shadow var(--dc-fast),opacity var(--dc-fast);
}
.dc-btn:hover{transform:translateY(-1px)}
.dc-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.dc-btn-primary{background:var(--dc-primary);color:var(--dc-primary-contrast);box-shadow:0 10px 24px color-mix(in srgb,var(--dc-primary) 24%,transparent)}
.dc-btn-secondary{background:var(--dc-surface);color:var(--dc-text);border-color:var(--dc-border)}
.dc-btn-ghost{background:transparent;color:var(--dc-text)}
.dc-btn-danger{background:var(--dc-danger);color:white}
.dc-btn-sm{min-height:36px;padding:0 13px;font-size:.86rem}
.dc-btn-lg{min-height:52px;padding:0 23px;font-size:1rem}
.dc-btn-icon{width:var(--dc-control-h);padding:0}

/* FORMS */
.dc-field{display:flex;flex-direction:column;gap:8px}
.dc-input,.dc-select,.dc-textarea{
  width:100%;
  border:1px solid var(--dc-border);
  background:var(--dc-surface);
  color:var(--dc-text);
  border-radius:var(--dc-radius-sm);
  min-height:var(--dc-control-h);
  padding:0 13px;
  outline:none;
  transition:border-color var(--dc-fast),box-shadow var(--dc-fast),background var(--dc-fast);
}
.dc-textarea{min-height:120px;padding:13px;resize:vertical}
.dc-input:focus,.dc-select:focus,.dc-textarea:focus{
  border-color:color-mix(in srgb,var(--dc-primary) 55%,var(--dc-border));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--dc-primary) 12%,transparent);
}
.dc-input-group{display:flex;align-items:center;border:1px solid var(--dc-border);background:var(--dc-surface);border-radius:var(--dc-radius-sm);overflow:hidden}
.dc-input-group input{border:0;min-height:42px;padding:0 12px;flex:1;outline:none;background:transparent}
.dc-help{font-size:.78rem;color:var(--dc-muted)}
.dc-error{font-size:.78rem;color:var(--dc-danger)}

/* NAVIGATION */
.dc-navbar{
  min-height:72px;
  display:flex;align-items:center;
  border-bottom:1px solid var(--dc-border);
  background:var(--dc-surface);
}
.dc-navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.dc-nav-links{display:flex;align-items:center;gap:6px}
.dc-nav-link{
  min-height:38px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--dc-radius-sm);
  color:var(--dc-muted);font-weight:680
}
.dc-nav-link:hover,.dc-nav-link.is-active{color:var(--dc-text);background:var(--dc-surface-2)}
.dc-sidebar{
  width:260px;flex:0 0 260px;min-height:100vh;padding:20px;
  border-right:1px solid var(--dc-border);background:var(--dc-surface)
}
.dc-sidebar-link{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--dc-radius-sm);
  color:var(--dc-muted);font-weight:680
}
.dc-sidebar-link:hover,.dc-sidebar-link.is-active{background:var(--dc-surface-2);color:var(--dc-text)}
.dc-bottom-nav{
  display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  grid-template-columns:repeat(4,1fr);padding:7px;border:1px solid var(--dc-border);
  border-radius:18px;background:color-mix(in srgb,var(--dc-surface) 88%,transparent);
  backdrop-filter:blur(18px);box-shadow:var(--dc-shadow-md)
}
.dc-bottom-nav button{border:0;background:transparent;padding:8px 4px;color:var(--dc-muted);font-weight:750}

/* BADGES, CHIPS, AVATARS */
.dc-badge{
  display:inline-flex;align-items:center;gap:7px;
  min-height:28px;padding:0 10px;border-radius:999px;
  font-size:.76rem;font-weight:820;
  background:color-mix(in srgb,var(--dc-primary) 10%,var(--dc-surface));
  color:var(--dc-primary)
}
.dc-badge-success{background:color-mix(in srgb,var(--dc-success) 12%,white);color:var(--dc-success)}
.dc-badge-warning{background:color-mix(in srgb,var(--dc-warning) 14%,white);color:var(--dc-warning)}
.dc-badge-danger{background:color-mix(in srgb,var(--dc-danger) 12%,white);color:var(--dc-danger)}
.dc-chip{
  min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--dc-border);
  background:var(--dc-surface);color:var(--dc-muted);font-weight:700
}
.dc-chip.is-active{background:var(--dc-primary);border-color:var(--dc-primary);color:white}
.dc-avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-size:.82rem;font-weight:820;color:white;background:#68707d;overflow:hidden
}
.dc-avatar img{width:100%;height:100%;object-fit:cover}
.dc-avatar-sm{width:34px;height:34px}
.dc-avatar-lg{width:58px;height:58px}
.dc-avatar-xl{width:88px;height:88px}

/* STATS */
.dc-stat{
  padding:20px;border:1px solid var(--dc-border);border-radius:var(--dc-radius-md);background:var(--dc-surface)
}
.dc-stat-label{font-size:.8rem;font-weight:750;color:var(--dc-muted)}
.dc-stat-value{font-size:1.9rem;font-weight:850;letter-spacing:-.04em;margin-top:4px}
.dc-stat-delta{font-size:.78rem;margin-top:8px;color:var(--dc-success)}

/* TABLES */
.dc-table-wrap{overflow:auto;border:1px solid var(--dc-border);border-radius:var(--dc-radius-md);background:var(--dc-surface)}
.dc-table th{
  text-align:left;padding:13px 16px;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dc-muted);background:var(--dc-surface-2);border-bottom:1px solid var(--dc-border)
}
.dc-table td{padding:15px 16px;border-bottom:1px solid var(--dc-border);vertical-align:middle}
.dc-table tr:last-child td{border-bottom:0}
.dc-table tbody tr:hover{background:color-mix(in srgb,var(--dc-surface-2) 60%,transparent)}

/* LISTS / FEEDS */
.dc-list{display:flex;flex-direction:column}
.dc-list-item{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--dc-border)}
.dc-list-item:last-child{border-bottom:0}
.dc-feed-item{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:start;padding:16px 0;border-bottom:1px solid var(--dc-border)}
.dc-feed-item:last-child{border-bottom:0}

/* TABS / ACCORDION */
.dc-tabs{display:flex;gap:8px;border-bottom:1px solid var(--dc-border)}
.dc-tab{
  border:0;background:transparent;padding:12px 2px;margin-right:18px;color:var(--dc-muted);
  font-weight:740;border-bottom:2px solid transparent
}
.dc-tab.is-active{color:var(--dc-text);border-bottom-color:var(--dc-primary)}
.dc-tab-panel{display:none}
.dc-tab-panel.is-active{display:block}
.dc-accordion{border-top:1px solid var(--dc-border)}
.dc-accordion-item{border-bottom:1px solid var(--dc-border)}
.dc-accordion-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:58px;padding:0;border:0;background:transparent;text-align:left;font-weight:760
}
.dc-accordion-content{display:none;padding:0 0 18px;color:var(--dc-muted);line-height:1.65}
.dc-accordion-item.is-open .dc-accordion-content{display:block}

/* MODAL / DRAWER / TOAST */
.dc-modal-backdrop{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(10,14,22,.48);backdrop-filter:blur(8px)
}
.dc-modal-backdrop.is-open{display:flex}
.dc-modal{
  width:min(540px,100%);max-height:calc(100vh - 40px);overflow:auto;
  padding:24px;background:var(--dc-surface);border-radius:var(--dc-radius-lg);box-shadow:var(--dc-shadow-lg)
}
.dc-drawer-backdrop{
  position:fixed;inset:0;z-index:90;display:none;background:rgba(10,14,22,.38)
}
.dc-drawer-backdrop.is-open{display:block}
.dc-drawer{
  position:absolute;top:0;right:0;width:min(420px,92vw);height:100%;overflow:auto;
  background:var(--dc-surface);padding:22px;box-shadow:var(--dc-shadow-lg);
  transform:translateX(100%);transition:transform var(--dc-normal) var(--dc-ease)
}
.dc-drawer-backdrop.is-open .dc-drawer{transform:none}
.dc-toast-wrap{position:fixed;right:20px;bottom:20px;z-index:130;display:flex;flex-direction:column;gap:10px}
.dc-toast{
  min-width:260px;max-width:360px;padding:14px 16px;border-radius:var(--dc-radius-sm);
  background:#171a22;color:white;box-shadow:var(--dc-shadow-lg);animation:dc-up .3s var(--dc-ease)
}

/* EMPTY / SKELETON / PROGRESS */
.dc-empty{text-align:center;padding:48px 24px;border:1px dashed var(--dc-border);border-radius:var(--dc-radius-md)}
.dc-progress{height:10px;background:var(--dc-surface-2);border-radius:999px;overflow:hidden}
.dc-progress > span{display:block;height:100%;background:var(--dc-primary);border-radius:999px}
.dc-skeleton{
  border-radius:8px;min-height:16px;
  background:linear-gradient(90deg,#eceef2 25%,#f7f8fa 37%,#eceef2 63%);
  background-size:400% 100%;animation:dc-shimmer 1.4s ease infinite
}

/* APP SHELLS */
.dc-app-shell{display:flex;min-height:100vh}
.dc-app-main{flex:1;min-width:0}
.dc-page{padding:26px}
.dc-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}
.dc-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dc-kanban{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:18px;overflow:auto}
.dc-kanban-column{background:var(--dc-surface-2);border-radius:var(--dc-radius-md);padding:14px}
.dc-kanban-card{background:var(--dc-surface);border:1px solid var(--dc-border);border-radius:var(--dc-radius-sm);padding:14px;margin-top:10px}
.dc-chat-layout{display:grid;grid-template-columns:300px 1fr;min-height:620px;border:1px solid var(--dc-border);border-radius:var(--dc-radius-md);overflow:hidden;background:var(--dc-surface)}
.dc-chat-list{border-right:1px solid var(--dc-border)}
.dc-chat-message{max-width:72%;padding:11px 13px;border-radius:16px;background:var(--dc-surface-2);margin:8px 0}
.dc-chat-message.is-me{margin-left:auto;background:var(--dc-primary);color:white}

/* ANIMATIONS */
.dc-animate-up{animation:dc-up .6s var(--dc-ease) both}
.dc-animate-fade{animation:dc-fade .5s ease both}
.dc-animate-scale{animation:dc-scale .45s var(--dc-ease) both}
.dc-animate-slide-left{animation:dc-slide-left .55s var(--dc-ease) both}
.dc-delay-1{animation-delay:.08s}
.dc-delay-2{animation-delay:.16s}
.dc-delay-3{animation-delay:.24s}
.dc-hover-scale{transition:transform var(--dc-normal) var(--dc-ease)}
.dc-hover-scale:hover{transform:scale(1.02)}
@keyframes dc-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes dc-fade{from{opacity:0}to{opacity:1}}
@keyframes dc-scale{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes dc-slide-left{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes dc-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* UTILITIES */
.dc-text-center{text-align:center}
.dc-w-full{width:100%}
.dc-m-0{margin:0}
.dc-mt-1{margin-top:6px}
.dc-mt-2{margin-top:12px}
.dc-mt-3{margin-top:18px}
.dc-mt-4{margin-top:24px}
.dc-mb-1{margin-bottom:6px}
.dc-mb-2{margin-bottom:12px}
.dc-mb-3{margin-bottom:18px}
.dc-mb-4{margin-bottom:24px}
.dc-p-2{padding:12px}
.dc-p-3{padding:18px}
.dc-p-4{padding:24px}
.dc-rounded-sm{border-radius:var(--dc-radius-sm)}
.dc-rounded-md{border-radius:var(--dc-radius-md)}
.dc-rounded-lg{border-radius:var(--dc-radius-lg)}
.dc-shadow-sm{box-shadow:var(--dc-shadow-sm)}
.dc-shadow-md{box-shadow:var(--dc-shadow-md)}

/* RESPONSIVE */
@media(max-width:960px){
  .dc-grid-4,.dc-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dc-split{grid-template-columns:1fr}
  .dc-sidebar{display:none}
  .dc-chat-layout{grid-template-columns:1fr}
  .dc-chat-list{display:none}
}
@media(max-width:680px){
  .dc-container,.dc-container-wide{width:min(100% - 20px,var(--dc-container))}
  .dc-section{padding:54px 0}
  .dc-grid-2,.dc-grid-3,.dc-grid-4{grid-template-columns:1fr}
  .dc-hidden-mobile{display:none!important}
  .dc-only-mobile{display:block!important}
  .dc-bottom-nav{display:grid}
  .dc-page{padding:18px 12px 90px}
  .dc-page-header{flex-direction:column}
  .dc-display{font-size:clamp(2.65rem,15vw,4.5rem)}
}