/* UMBRA Control Center — implementação da Referência visual 1. */
.umbra-control-center {
  --cc-bg: #030304;
  --cc-panel: #101114;
  --cc-panel-raised: #16171b;
  --cc-border: #292b31;
  --cc-border-strong: #3c3f47;
  --cc-text: #f4f5f7;
  --cc-copy: #c4c7ce;
  --cc-muted: #858a95;
  --cc-amber: #f59e0b;
  --cc-amber-bright: #ffb31a;
  --cc-green: #34d399;
  --cc-red: #fb7185;
  --cc-violet: #a78bfa;
  background: radial-gradient(circle at 70% -10%, rgba(245,158,11,.055), transparent 32rem), var(--cc-bg);
}
.umbra-control-center ::selection { background: rgba(245,158,11,.3); color: #fff; }
.umbra-control-center :focus-visible { outline: 2px solid var(--cc-amber); outline-offset: 2px; }

/* Sidebar */
.umbra-control-center .sidebar {
  inset: 0 auto 0 0; border: 0; border-right: 1px solid #24262b; border-radius: 0;
  background: linear-gradient(180deg,rgba(245,158,11,.05),transparent 190px),#08090a;
  box-shadow: 18px 0 55px rgba(0,0,0,.25);
}
.umbra-control-center .sidebar::after { content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--cc-amber),transparent 82%); }
.umbra-control-center .sidebar-head { min-height:78px;padding:0 20px;border-bottom:1px solid #202227; }
.umbra-control-center .brand { gap:13px;font-size:18px;letter-spacing:.16em; }
.umbra-control-center .brand-logo { width:34px;height:34px; }
.umbra-control-center .sidebar-collapse { width:34px;height:34px;border:1px solid #292b30;border-radius:7px;background:transparent;color:#777c87; }
.umbra-control-center .sidebar-nav { padding:22px 14px 12px; }
.umbra-control-center .nav-group + .nav-group { margin-top:24px; }
.umbra-control-center .nav-label { padding:0 12px 8px;color:#5f636d;font-size:9px;letter-spacing:.18em; }
.umbra-control-center .nav-item { gap:15px;min-height:43px;margin:4px 0;padding:0 12px;border:1px solid transparent;border-radius:8px;color:#9da2ae;font-size:13px; }
.umbra-control-center .nav-item>svg { width:20px;height:20px; }
.umbra-control-center .nav-item:hover { border-color:#292b30;background:#111216;color:#eceef2;transform:translateX(2px); }
.umbra-control-center .nav-item.active { border-color:rgba(245,158,11,.32);background:linear-gradient(90deg,rgba(245,158,11,.15),rgba(245,158,11,.025));color:#fbbf24;box-shadow:inset 0 0 20px rgba(245,158,11,.035); }
.umbra-control-center .nav-item.active::before { left:-15px;top:9px;bottom:9px;width:2px;border-radius:0; }
.umbra-control-center .new-badge { border:1px solid rgba(167,139,250,.28);background:rgba(139,92,246,.15);color:#c4b5fd;box-shadow:none; }
.umbra-control-center .sidebar-footer { margin:0 14px 12px;border-color:#202227; }
.umbra-control-center .plan-card,.umbra-control-center .account-card { min-height:58px;border:1px solid transparent;border-radius:8px; }
.umbra-control-center .plan-card { background:#0d0e11;border-color:#22242a; }
.umbra-control-center .plan-card:hover,.umbra-control-center .account-card:hover { border-color:#34363c;background:#121317; }
.umbra-control-center .footer-icon,.umbra-control-center .avatar { width:38px;height:38px;border-radius:8px; }
.umbra-control-center .avatar { font-size:15px; }
.umbra-control-center .workspace { margin-left:var(--sidebar-width); }

/* Topbar */
.umbra-control-center .topbar { position:sticky;top:0;z-index:18;height:78px;padding:0 30px;border:0;border-bottom:1px solid rgba(50,52,58,.82);background:rgba(5,6,7,.84);backdrop-filter:blur(18px) saturate(130%);box-shadow:0 14px 40px rgba(0,0,0,.16); }
.umbra-control-center .topbar::before { content:"";position:absolute;left:30px;bottom:-1px;width:54px;height:1px;background:var(--cc-amber);box-shadow:0 0 12px rgba(245,158,11,.55); }
.umbra-control-center .page-heading h1 { font-size:18px;font-weight:720;letter-spacing:-.015em; }
.umbra-control-center .page-heading p { color:#777c87;font-size:11px; }
.umbra-control-center .page-content { max-width:1920px;padding:28px 30px 52px; }

/* Cards */
.umbra-control-center .panel,
.umbra-control-center [class$="-card"],
.umbra-control-center [class*="-card "],
.umbra-control-center .channel-summary article,
.umbra-control-center .cost-summary article,
.umbra-control-center .overview-cards article {
  border-color:var(--cc-border);border-radius:10px;
  background:linear-gradient(145deg,rgba(22,23,27,.97),rgba(11,12,14,.99));
  box-shadow:0 1px 0 rgba(255,255,255,.025),0 12px 30px rgba(0,0,0,.14);
}
.umbra-control-center [class$="-card"]:hover,.umbra-control-center [class*="-card "]:hover { border-color:var(--cc-border-strong); }
.umbra-control-center .panel-card,.umbra-control-center .chart-card,.umbra-control-center .config-card,.umbra-control-center .account-section-card,.umbra-control-center .resource-card,.umbra-control-center .integration-card { position:relative;overflow:hidden; }
.umbra-control-center .panel-card::before,.umbra-control-center .chart-card::before,.umbra-control-center .config-card::before,.umbra-control-center .account-section-card::before,.umbra-control-center .resource-card::before,.umbra-control-center .integration-card::before { content:"";position:absolute;inset:0 auto auto 0;width:42px;height:2px;background:linear-gradient(90deg,var(--cc-amber),transparent); }

/* Botões */
.umbra-control-center button,.umbra-control-center .button { min-height:38px;padding:8px 14px;border:1px solid #34373e;border-radius:7px;background:linear-gradient(180deg,#1d1f23,#141519);color:#e5e7eb;font-size:12px;font-weight:650;letter-spacing:.01em;box-shadow:inset 0 1px rgba(255,255,255,.035),0 4px 12px rgba(0,0,0,.12);transition:.15s ease; }
.umbra-control-center button:hover,.umbra-control-center .button:hover { border-color:rgba(245,158,11,.62);background:#222329;color:#fbbf24;transform:translateY(-1px); }
.umbra-control-center button:active,.umbra-control-center .button:active { transform:none; }
.umbra-control-center .primary-action,.umbra-control-center button.primary-action,.umbra-control-center .button.primary-action { border-color:#e49108;background:linear-gradient(135deg,#ffb318,#e78a06);color:#171007;box-shadow:0 7px 20px rgba(245,158,11,.18),inset 0 1px rgba(255,255,255,.3); }
.umbra-control-center .primary-action:hover,.umbra-control-center button.primary-action:hover,.umbra-control-center .button.primary-action:hover { border-color:#fbbf24;background:linear-gradient(135deg,#ffc43a,#f59e0b);color:#0d0a04; }
.umbra-control-center button.danger { border-color:rgba(239,68,68,.28);background:rgba(127,29,29,.12);color:#fda4af; }
.umbra-control-center button:disabled { transform:none;filter:saturate(.4);opacity:.38; }

/* Inputs e dropdowns */
.umbra-control-center input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),.umbra-control-center textarea,.umbra-control-center select { min-height:42px;padding:9px 12px;border:1px solid #303239;border-radius:7px;background-color:#08090b;color:var(--cc-text);box-shadow:inset 0 1px 8px rgba(0,0,0,.25);transition:.16s ease; }
.umbra-control-center input::placeholder,.umbra-control-center textarea::placeholder { color:#5f646e; }
.umbra-control-center input:not([type="checkbox"]):not([type="radio"]):focus,.umbra-control-center textarea:focus,.umbra-control-center select:focus { outline:0;border-color:rgba(245,158,11,.72);background-color:#0b0c0e;box-shadow:0 0 0 3px rgba(245,158,11,.08),inset 3px 0 0 var(--cc-amber); }
.umbra-control-center select { padding-right:36px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8e939d 50%),linear-gradient(135deg,#8e939d 50%,transparent 50%);background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat; }
.umbra-control-center input[type="checkbox"],.umbra-control-center input[type="radio"] { accent-color:var(--cc-amber); }
.umbra-control-center label { color:#9ba0ab; }

/* Modais e painéis laterais */
.umbra-control-center .umbra-dialog__backdrop,.umbra-control-center [class$="-backdrop"] { background:rgba(0,0,0,.74);backdrop-filter:blur(9px); }
.umbra-control-center .umbra-dialog__panel,.umbra-control-center .catalog-modal,.umbra-control-center .media-preview-modal { border:1px solid #3a3c43;border-radius:12px;background:linear-gradient(145deg,#17181c,#090a0c 68%);box-shadow:0 34px 110px rgba(0,0,0,.78); }
.umbra-control-center .umbra-dialog__panel::before,.umbra-control-center .catalog-modal::before,.umbra-control-center .media-preview-modal::before { content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--cc-amber),transparent); }
.umbra-control-center .umbra-dialog__header { padding:20px 22px;background:rgba(255,255,255,.012); }
.umbra-control-center .umbra-dialog__body { padding:22px; }
.umbra-control-center .umbra-dialog__actions { padding:15px 22px;background:#0b0c0e; }
.umbra-control-center .umbra-dialog__icon { border:1px solid rgba(245,158,11,.25);border-radius:8px; }
.umbra-control-center .cost-editor,.umbra-control-center .integration-editor,.umbra-control-center .machine-editor,.umbra-control-center .avatar-editor { border-left:1px solid #3a3c43;background:linear-gradient(160deg,#15161a,#08090b 62%);box-shadow:-30px 0 90px rgba(0,0,0,.6); }

/* Tabs */
.umbra-control-center .cost-tabs,.umbra-control-center .avatar-tabs,.umbra-control-center .machine-tabs,.umbra-control-center .detail-tabs,.umbra-control-center .media-kind-tabs { display:flex;gap:4px;padding:5px;border:1px solid #292b31;border-radius:9px;background:#090a0c; }
.umbra-control-center .cost-tabs button,.umbra-control-center .avatar-tabs button,.umbra-control-center .machine-tabs button,.umbra-control-center .detail-tabs button,.umbra-control-center .media-kind-tabs button { min-height:36px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:#878c97;font-weight:650; }
.umbra-control-center .cost-tabs button:hover,.umbra-control-center .avatar-tabs button:hover,.umbra-control-center .machine-tabs button:hover,.umbra-control-center .detail-tabs button:hover,.umbra-control-center .media-kind-tabs button:hover { background:#141519;color:#d8dae0;transform:none; }
.umbra-control-center .cost-tabs button.active,.umbra-control-center .avatar-tabs button.active,.umbra-control-center .machine-tabs button.active,.umbra-control-center .detail-tabs button.active,.umbra-control-center .media-kind-tabs button.active { background:linear-gradient(180deg,rgba(245,158,11,.18),rgba(245,158,11,.07));color:#fbbf24;box-shadow:inset 0 -2px var(--cc-amber); }

/* Tabelas */
.umbra-control-center table { width:100%;border-collapse:separate;border-spacing:0 5px; }
.umbra-control-center thead th { padding:10px 13px;border:0;color:#757b87;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:transparent; }
.umbra-control-center tbody tr { background:#101115;transition:.15s ease; }
.umbra-control-center tbody tr:hover { background:#17181d; }
.umbra-control-center tbody td { padding:12px 13px;border-top:1px solid #292b31;border-bottom:1px solid #292b31; }
.umbra-control-center tbody td:first-child { border-left:1px solid #292b31;border-radius:7px 0 0 7px; }
.umbra-control-center tbody td:last-child { border-right:1px solid #292b31;border-radius:0 7px 7px 0; }
.umbra-control-center .cost-table,.umbra-control-center .table-shell,.umbra-control-center .queue-table-scroll,.umbra-control-center .production-table-panel { border-radius:10px;background:#090a0c; }

/* Uploads */
.umbra-control-center .upload-placeholder,.umbra-control-center .upload-button,.umbra-control-center label[class*="upload"],.umbra-control-center [class*="dropzone"] { position:relative;border:1px dashed #4a4d55;border-radius:9px;background:repeating-linear-gradient(-45deg,#0d0e11,#0d0e11 8px,#101115 8px,#101115 16px);color:#adb1ba; }
.umbra-control-center .upload-placeholder:hover,.umbra-control-center .upload-button:hover,.umbra-control-center label[class*="upload"]:hover,.umbra-control-center [class*="dropzone"]:hover { border-color:var(--cc-amber);background:rgba(245,158,11,.08);color:#fbbf24; }

/* Progress bars */
.umbra-control-center [class*="progress-track"],.umbra-control-center .storage-progress,.umbra-control-center .mini-progress,.umbra-control-center .projection-track { overflow:hidden;min-height:7px;border:1px solid #292b30;border-radius:3px;background:#07080a;box-shadow:inset 0 1px 4px rgba(0,0,0,.6); }
.umbra-control-center [class*="progress-track"]>i,.umbra-control-center .storage-progress>i,.umbra-control-center .mini-progress>i,.umbra-control-center .projection-track>i { display:block;height:100%;border-radius:2px;background:repeating-linear-gradient(120deg,#f59e0b 0,#f59e0b 8px,#fbbf24 8px,#fbbf24 14px);box-shadow:0 0 14px rgba(245,158,11,.34);transition:width .28s ease; }

/* Toasts */
.umbra-control-center [class$="-toast"] { position:fixed;z-index:1200;right:24px;bottom:24px;max-width:min(390px,calc(100vw - 32px));padding:14px 18px 14px 21px;border:1px solid #3a3d44;border-radius:8px;background:rgba(17,18,21,.97);color:#e8e9ec;box-shadow:0 22px 65px rgba(0,0,0,.6);backdrop-filter:blur(14px); }
.umbra-control-center [class$="-toast"]::before { content:"";position:absolute;inset:7px auto 7px 0;width:3px;border-radius:0 3px 3px 0;background:var(--cc-amber);box-shadow:0 0 10px rgba(245,158,11,.48); }

@media(max-width:860px){
  .umbra-control-center .sidebar { inset:0 auto 0 0;border-radius:0; }
  .umbra-control-center .workspace { margin-left:0; }
  .umbra-control-center .topbar { height:68px;padding:0 16px; }
  .umbra-control-center .topbar::before { left:16px; }
  .umbra-control-center .page-content { padding:20px 16px 38px; }
  .umbra-control-center [class$="-toast"] { right:16px;bottom:16px; }
}
@media(max-width:620px){
  .umbra-control-center .cost-tabs,.umbra-control-center .avatar-tabs,.umbra-control-center .machine-tabs,.umbra-control-center .detail-tabs,.umbra-control-center .media-kind-tabs { overflow-x:auto;flex-wrap:nowrap; }
  .umbra-control-center .cost-tabs button,.umbra-control-center .avatar-tabs button,.umbra-control-center .machine-tabs button,.umbra-control-center .detail-tabs button,.umbra-control-center .media-kind-tabs button { flex:0 0 auto; }
}