
/* Imara Studio Phase 21 — Unified product design system */
:root{
  --im-bg:#f6f7fb;--im-surface:#fff;--im-surface-2:#f9fafc;--im-surface-3:#f1f3f8;
  --im-text:#151925;--im-text-2:#3f4758;--im-muted:#667085;--im-subtle:#98a2b3;
  --im-border:#e3e7ef;--im-border-strong:#cfd5df;--im-primary:#6941c6;--im-primary-hover:#5733aa;
  --im-primary-soft:#f1ebff;--im-success:#087a55;--im-success-soft:#e8f7f1;
  --im-warning:#9a5800;--im-warning-soft:#fff3df;--im-danger:#b4233f;--im-danger-soft:#fff0f3;
  --im-info:#175cd3;--im-info-soft:#eef4ff;--im-radius-sm:11px;--im-radius-md:16px;
  --im-radius-lg:22px;--im-radius-xl:30px;--im-shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --im-shadow-sm:0 4px 14px rgba(16,24,40,.07);--im-shadow-md:0 14px 40px rgba(16,24,40,.10);
  --im-shadow-lg:0 30px 80px rgba(16,24,40,.16);--im-focus:0 0 0 4px rgba(105,65,198,.18);
  --im-ease:cubic-bezier(.2,.8,.2,1)
}
body:has(.studio-sidebar){background:var(--im-bg)!important;color:var(--im-text)!important}
body:has(.studio-sidebar) main{
  width:auto;
  max-width:none;
  margin-left:var(--sidebar-w)!important;
  margin-right:0!important;
  padding-left:clamp(20px,3vw,38px)!important;
  padding-right:clamp(20px,3vw,38px)!important;
  padding-block:clamp(20px,3vw,38px)
}
body:has(.studio-sidebar) main>section,
body:has(.studio-sidebar) main>header{
  width:100%;
  max-width:1380px;
  margin-left:auto;
  margin-right:auto
}
body:has(.studio-sidebar) main :is(h1,h2,h3,h4,strong,label,th){color:var(--im-text)}
body:has(.studio-sidebar) main :is(p,small,.muted,.help-text){color:var(--im-muted)}
body:has(.studio-sidebar) :focus-visible{outline:none!important;box-shadow:var(--im-focus)!important}
.im-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 0 28px}
.im-page-header-copy{max-width:760px}.im-page-header h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.04;margin:0 0 10px;letter-spacing:-.045em}
.im-page-header p{font-size:1.02rem;line-height:1.65;margin:0}.im-page-actions{display:flex;gap:10px;flex-wrap:wrap}
.im-card,.panel,.growth-card,.campaign-card,.premium-card,.ui-card{background:var(--im-surface)!important;border:1px solid var(--im-border)!important;border-radius:var(--im-radius-md)!important;box-shadow:var(--im-shadow-xs)!important}
.im-card{padding:24px}.im-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.im-card-head h2,.im-card-head h3{margin:0}
.im-record-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.im-record-card{display:flex;flex-direction:column;min-height:170px;padding:20px;background:var(--im-surface);border:1px solid var(--im-border);border-radius:var(--im-radius-md);box-shadow:var(--im-shadow-xs);color:var(--im-text)}
.im-record-card:hover{transform:translateY(-2px);border-color:#cab9f7;box-shadow:var(--im-shadow-sm)}
.im-record-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.im-record-card h3{font-size:1.05rem;margin:0 0 7px}.im-record-card p{margin:0;line-height:1.55}
.im-record-card-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.im-record-card-metrics div{background:var(--im-surface-2);border:1px solid var(--im-border);border-radius:10px;padding:10px}
.im-record-card-metrics small{display:block;font-size:.72rem;margin-bottom:3px}.im-record-card-metrics strong{font-size:.92rem}.im-record-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:18px}
.im-status{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:6px 10px;border-radius:999px;font-size:.75rem;font-weight:800;text-transform:capitalize;border:1px solid transparent}
.im-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.im-status[data-status="active"],.im-status[data-status="ready"],.im-status[data-status="won"],.im-status[data-status="completed"]{background:var(--im-success-soft);color:var(--im-success);border-color:#b7e7d6}
.im-status[data-status="draft"],.im-status[data-status="new"],.im-status[data-status="queued"]{background:var(--im-info-soft);color:var(--im-info);border-color:#c7d7fe}
.im-status[data-status="paused"],.im-status[data-status="pending"],.im-status[data-status="quoted"]{background:var(--im-warning-soft);color:var(--im-warning);border-color:#f4d39a}
.im-status[data-status="failed"],.im-status[data-status="lost"],.im-status[data-status="rejected"]{background:var(--im-danger-soft);color:var(--im-danger);border-color:#f5bdc8}
.im-trust-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px}
.im-trust-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--im-surface);border:1px solid var(--im-border);border-radius:var(--im-radius-sm)}
.im-trust-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:var(--im-success-soft);color:var(--im-success);font-weight:900}.im-trust-item strong{display:block;font-size:.88rem}.im-trust-item small{display:block;margin-top:2px}
.button,.sidebar-create-button,button[type="submit"]{font-weight:800!important;border-radius:var(--im-radius-sm)!important}
.button.primary,.button:not(.ghost):not(.secondary),.calm-primary{background:var(--im-primary)!important;border-color:var(--im-primary)!important;color:#fff!important}
.button.primary:hover,.button:not(.ghost):not(.secondary):hover,.calm-primary:hover{background:var(--im-primary-hover)!important;border-color:var(--im-primary-hover)!important;transform:translateY(-1px)}
.button.ghost,.button.secondary{background:#fff!important;color:var(--im-text)!important;border:1px solid var(--im-border-strong)!important}
.empty,.im-empty-state{min-height:220px;display:grid;place-items:center;text-align:center;padding:34px;background:linear-gradient(180deg,#fff,#fafbfe);border:1px dashed var(--im-border-strong);border-radius:var(--im-radius-md);color:var(--im-muted)!important}
.im-empty-state-inner{max-width:420px}.im-empty-state-icon{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 15px;border-radius:16px;background:var(--im-primary-soft);color:var(--im-primary);font-size:1.5rem;font-weight:900}
.im-empty-state h3{margin:0 0 8px;font-size:1.15rem}.im-empty-state p{margin:0 0 18px}
.im-skeleton{position:relative;overflow:hidden;background:#edf0f5!important;color:transparent!important;border-radius:8px}.im-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:imShimmer 1.3s infinite}
@keyframes imShimmer{100%{transform:translateX(100%)}}.ui-submit-loading{pointer-events:none;opacity:.8}.ui-submit-loading::after{content:"";display:inline-block;width:13px;height:13px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:imSpin .7s linear infinite}@keyframes imSpin{to{transform:rotate(360deg)}}
.im-task-centre{display:grid;gap:10px}.im-task{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--im-border);border-radius:12px;background:var(--im-surface)}
.im-task-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--im-primary-soft);color:var(--im-primary);font-weight:900}.im-task strong{display:block;font-size:.9rem}.im-task p{font-size:.8rem;margin:3px 0 0}.im-task a{font-size:.8rem;font-weight:800;color:var(--im-primary)}
body:has(.studio-sidebar) :is(input,select,textarea){min-height:44px;background:#fff;color:var(--im-text);border:1px solid var(--im-border-strong);border-radius:var(--im-radius-sm)}
body:has(.studio-sidebar) textarea{min-height:112px;resize:vertical}body:has(.studio-sidebar) :is(input,select,textarea):focus{border-color:var(--im-primary)!important;box-shadow:var(--im-focus)!important}
.ui-table-wrap{border:1px solid var(--im-border);border-radius:var(--im-radius-md);background:#fff;box-shadow:var(--im-shadow-xs)}.ui-table-wrap table{margin:0!important}.ui-table-wrap th{background:var(--im-surface-2)!important;color:var(--im-text-2)!important;font-size:.78rem!important;text-transform:uppercase;letter-spacing:.05em}.ui-table-wrap td{color:var(--im-text-2)!important}.ui-table-wrap tr:hover td{background:#fbfaff!important}
.poster-toolbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(18px);border-bottom:1px solid var(--im-border)!important}.poster-workspace{background:#eceef4!important}.poster-left,.poster-right{background:#fff!important;border-color:var(--im-border)!important}
.im-editor-status{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--im-muted)}.im-save-dot{width:8px;height:8px;border-radius:50%;background:var(--im-success)}.im-editor-zoom{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--im-border);border-radius:10px;background:#fff}.im-editor-zoom button{width:32px;height:32px;border:0;border-radius:7px;background:transparent;color:var(--im-text);font-weight:900}.im-editor-zoom button:hover{background:var(--im-surface-3)}
.poster-canvas-frame{position:relative;box-shadow:0 20px 70px rgba(16,24,40,.17)!important}.poster-canvas-frame.im-safe-guides::after{content:"";position:absolute;inset:5%;border:1px dashed rgba(105,65,198,.55);pointer-events:none;border-radius:2px}
.editor-trust-note{display:block;margin:9px 0;color:var(--im-success)!important}
.im-mobile-nav{display:none;position:fixed;left:10px;right:10px;bottom:10px;z-index:100;grid-template-columns:repeat(5,1fr);padding:7px;border:1px solid rgba(255,255,255,.75);border-radius:18px;background:rgba(17,19,27,.94);backdrop-filter:blur(16px);box-shadow:var(--im-shadow-lg)}
.im-mobile-nav a{display:grid;place-items:center;gap:3px;min-height:52px;border-radius:12px;color:#cdd2df;font-size:.68rem;font-weight:750}.im-mobile-nav a span{font-size:1.1rem}.im-mobile-nav a.active,.im-mobile-nav a[aria-current="page"]{background:rgba(133,95,255,.24);color:#fff}
@media(max-width:900px){.im-trust-strip{grid-template-columns:1fr}.im-page-header{flex-direction:column}.im-page-actions{width:100%}.im-page-actions .button{flex:1;justify-content:center}}
@media(max-width:760px){body:has(.studio-sidebar) main{padding-bottom:96px!important}.im-mobile-nav{display:grid}.im-record-grid{grid-template-columns:1fr}.studio-topbar .topbar-command,.studio-topbar .topbar-title span{display:none!important}.poster-workspace{display:block!important}.poster-left,.poster-right{width:100%!important;max-width:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* Phase 21.1 layout and sidebar readability hotfix */
.studio-sidebar,
.studio-sidebar :is(a,button,summary,strong,label){
  color:#f7f8fc!important;
}
.studio-sidebar :is(p,small,.sidebar-label){
  color:#9aa4bb!important;
}
.workspace-switcher-trigger strong,
.sidebar-credit strong{
  color:#ffffff!important;
}
.workspace-switcher-trigger small{
  color:#aeb7ca!important;
}
.sidebar-credit{
  color:#c9c3ff!important;
}
.studio-sidebar .sidebar-group a,
.studio-sidebar .sidebar-more summary{
  color:#b8c0d2!important;
}
.studio-sidebar .sidebar-group a:hover,
.studio-sidebar .sidebar-group a.active,
.studio-sidebar .sidebar-more summary:hover{
  color:#ffffff!important;
}
.calm-dashboard{
  box-sizing:border-box!important;
}
.calm-dashboard-hero,
.im-trust-strip,
.calm-create-grid,
.daily-summary-card,
.calm-dashboard-row,
.calm-panel,
.im-card{
  min-width:0;
  box-sizing:border-box
}
.calm-dashboard-hero>div{
  min-width:0;
  flex:1
}
.calm-dashboard-hero h1{
  overflow-wrap:anywhere;
}
.dashboard-campaign-composer{
  max-width:760px;
}
@media(max-width:1050px){
  body:has(.studio-sidebar) main{
    margin-left:0!important;
    padding-left:clamp(16px,3vw,28px)!important;
    padding-right:clamp(16px,3vw,28px)!important
  }
}
@media(max-width:700px){
  body:has(.studio-sidebar) main{
    padding-left:14px!important;
    padding-right:14px!important
  }
}
