:root,[data-theme="light"]{
--t-xs:.75rem;--t-sm:.875rem;--t-base:1rem;--t-lg:1.125rem;--t-xl:1.5rem;
--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;
--r-sm:.375rem;--r-md:.5rem;--r-lg:.75rem;--r-xl:1rem;--r-full:9999px;
--bg:#f7f6f2;--sf:#f9f8f5;--sf2:#fbfbf9;--sfo:#f0ede8;--bd:#d4d1ca;--dv:#dcd9d5;
--tx:#28251d;--txm:#7a7974;--txf:#bab9b4;
--pr:#01696f;--prh:#0c4e54;--prhl:#cedcd8;
--er:#a12c7b;--wa:#964219;--sc:#437a22;
--sh-sm:0 1px 2px rgba(0,0,0,.06);--sh-md:0 4px 12px rgba(0,0,0,.08);--sh-lg:0 12px 32px rgba(0,0,0,.12);
--tr:180ms cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
--bg:#171614;--sf:#1c1b19;--sf2:#201f1d;--sfo:#252421;--bd:#393836;--dv:#262523;
--tx:#cdccca;--txm:#9a9996;--txf:#5a5957;
--pr:#4f98a3;--prh:#227f8b;--prhl:#1e3436;
--er:#d163a7;--wa:#bb653b;--sc:#6daa45;
--sh-sm:0 1px 2px rgba(0,0,0,.25);--sh-md:0 4px 12px rgba(0,0,0,.35);--sh-lg:0 12px 32px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:'Satoshi',system-ui,sans-serif;font-size:var(--t-base);background:var(--bg);color:var(--tx);min-height:100vh}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
input,select,textarea{background:var(--sf);color:var(--tx);border:1px solid var(--bd);border-radius:var(--r-md);padding:.75rem .9rem;width:100%;transition:border-color var(--tr),box-shadow var(--tr)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pr);box-shadow:0 0 0 3px color-mix(in srgb,var(--pr) 20%,transparent)}
textarea{resize:vertical;min-height:90px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7974' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}

/* Layout */
.app-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:var(--sf);border-right:1px solid var(--dv);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--s2)}
.logo{display:flex;align-items:center;gap:.75rem;font-size:var(--t-lg);font-weight:700;letter-spacing:-.025em}
.logo-text{white-space:nowrap}
.sidebar-close{display:none}
.quick-wrap{padding:.1rem 0}
.btn-quick{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1rem;background:var(--pr);color:#fff;font-weight:700;font-size:var(--t-sm);border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:background var(--tr),transform var(--tr)}
.btn-quick:hover{background:var(--prh);transform:translateY(-1px)}
.btn-quick:active{transform:translateY(0)}
.snav{display:flex;flex-direction:column;gap:.3rem}
.ni{display:flex;align-items:center;gap:.75rem;padding:.8rem .9rem;border-radius:var(--r-lg);color:var(--txm);font-size:var(--t-sm);font-weight:500;transition:all var(--tr)}
.ni:hover{background:var(--sfo);color:var(--tx)}
.ni.active{background:var(--prhl);color:var(--pr);font-weight:700}
.ni svg{flex-shrink:0}
.sidebar-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:var(--s4);border-top:1px solid var(--dv)}
.ni-sm{display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm);color:var(--txm);padding:.6rem .75rem;border-radius:var(--r-md);transition:all var(--tr)}
.ni-sm:hover{background:var(--sfo);color:var(--tx)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:110}
.icon-btn{width:38px;height:38px;border-radius:var(--r-lg);background:var(--sfo);border:1px solid var(--bd);display:grid;place-items:center;transition:all var(--tr);color:var(--txm)}
.icon-btn:hover{background:var(--dv);color:var(--tx)}
.hamburger{display:none}

/* Topbar */
.main-wrap{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{height:68px;padding:0 var(--s6);border-bottom:1px solid var(--dv);display:flex;align-items:center;gap:var(--s4);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50}
.topbar-search{flex:1;display:flex;align-items:center;gap:.65rem;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r-xl);padding:.75rem 1rem;max-width:600px;transition:border-color var(--tr)}
.topbar-search:focus-within{border-color:var(--pr)}
.topbar-search input{border:none;background:transparent;padding:0;outline:none;min-width:0}
.topbar-search kbd{margin-left:auto;font-size:var(--t-xs);background:var(--sfo);border:1px solid var(--bd);border-radius:var(--r-sm);padding:.2rem .45rem;color:var(--txm);white-space:nowrap}

/* Flash */
.flash{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.2rem;margin:var(--s4) var(--s6) 0;border-radius:var(--r-lg);font-size:var(--t-sm);font-weight:600;animation:slideDown .3s ease}
.flash-success{background:color-mix(in srgb,var(--sc) 12%,transparent);color:var(--sc);border:1px solid color-mix(in srgb,var(--sc) 25%,transparent)}
.flash-error{background:color-mix(in srgb,var(--er) 12%,transparent);color:var(--er);border:1px solid color-mix(in srgb,var(--er) 25%,transparent)}
.flash-info{background:color-mix(in srgb,var(--pr) 12%,transparent);color:var(--pr);border:1px solid color-mix(in srgb,var(--pr) 25%,transparent)}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Main */
.main-content{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s6);flex:1}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.page-head h1{font-size:var(--t-xl);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.page-head p{color:var(--txm);margin-top:.35rem;font-size:var(--t-sm)}
.page-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}

/* Cards */
.card{background:var(--sf);border:1px solid color-mix(in srgb,var(--tx) 10%,transparent);border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--sh-sm)}
.card-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s4)}
.card-hd h2{font-size:var(--t-lg);font-weight:700}

/* KPIs */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.kpi{background:var(--sf);border:1px solid color-mix(in srgb,var(--tx) 8%,transparent);border-radius:var(--r-xl);padding:var(--s5);display:flex;flex-direction:column;gap:.55rem;transition:box-shadow var(--tr)}
.kpi:hover{box-shadow:var(--sh-md)}
.kpi-label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--txm);font-weight:700}
.kpi-value{font-size:2.1rem;font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.kpi-meta{font-size:var(--t-sm);color:var(--txm)}
.kpi-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:.4rem}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.split-7-5{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s4)}

/* Table */
.table-wrap{overflow:auto;border:1px solid var(--dv);border-radius:var(--r-xl);background:var(--sf)}
table{width:100%;border-collapse:collapse}
th,td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--dv);vertical-align:middle}
th{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--txm);background:var(--sfo);font-weight:700}
tr:last-child td{border-bottom:none}
tr:hover td{background:color-mix(in srgb,var(--sfo) 60%,transparent)}
.td-action{white-space:nowrap}
td a{color:var(--pr);font-weight:600}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .65rem;border-radius:var(--r-full);font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.b-aberto{background:color-mix(in srgb,var(--er) 12%,transparent);color:var(--er)}
.b-em_andamento{background:color-mix(in srgb,var(--pr) 12%,transparent);color:var(--pr)}
.b-aguardando{background:color-mix(in srgb,var(--wa) 12%,transparent);color:var(--wa)}
.b-resolvido,.b-concluido,.b-ativo{background:color-mix(in srgb,var(--sc) 12%,transparent);color:var(--sc)}
.b-cancelado,.b-inativo,.b-arquivado{background:color-mix(in srgb,var(--txm) 12%,transparent);color:var(--txm)}
.b-pausado{background:color-mix(in srgb,var(--wa) 12%,transparent);color:var(--wa)}
.b-alta{background:color-mix(in srgb,var(--er) 12%,transparent);color:var(--er)}
.b-media{background:color-mix(in srgb,var(--wa) 12%,transparent);color:var(--wa)}
.b-baixa{background:color-mix(in srgb,var(--sc) 12%,transparent);color:var(--sc)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.25rem;border-radius:var(--r-lg);font-size:var(--t-sm);font-weight:700;cursor:pointer;transition:all var(--tr);white-space:nowrap}
.btn-primary{background:var(--pr);color:#fff;border:1px solid transparent}
.btn-primary:hover{background:var(--prh)}
.btn-secondary{background:var(--sfo);border:1px solid var(--bd);color:var(--tx)}
.btn-secondary:hover{background:var(--dv)}
.btn-ghost{background:transparent;border:1px solid var(--bd);color:var(--txm)}
.btn-ghost:hover{background:var(--sfo);color:var(--tx)}
.btn-danger{background:color-mix(in srgb,var(--er) 12%,transparent);border:1px solid color-mix(in srgb,var(--er) 25%,transparent);color:var(--er)}
.btn-danger:hover{background:color-mix(in srgb,var(--er) 20%,transparent)}
.btn-sm{padding:.5rem .9rem;font-size:var(--t-xs)}

/* Forms */
.form-grid{display:flex;flex-direction:column;gap:var(--s4)}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:var(--t-sm);font-weight:700;color:var(--tx)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s4)}
.field-hint{font-size:var(--t-xs);color:var(--txm);margin-top:.25rem}

/* Modal */
.modal-overlay{position:fixed;inset:0;display:none;z-index:200;background:rgba(0,0,0,.55);place-items:center}
.modal-overlay.open{display:grid;animation:fadeIn .2s ease}
.modal{width:min(100%,580px);background:var(--sf);border:1px solid var(--bd);border-radius:var(--r-xl);box-shadow:var(--sh-lg);animation:scaleIn .2s ease;max-height:90vh;overflow-y:auto}
.modal-hd{display:flex;justify-content:space-between;align-items:center;padding:1.25rem;border-bottom:1px solid var(--dv);position:sticky;top:0;background:var(--sf);z-index:1}
.modal-hd h3{font-size:var(--t-lg);font-weight:700}
.modal-close-btn{font-size:1.4rem;width:36px;height:36px}
.modal-body{padding:1.25rem;display:flex;flex-direction:column;gap:var(--s4)}
.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;padding-top:.5rem}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* Filters */
.filters{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end}
.filters .field{min-width:150px;flex:1}

/* Timeline */
.timeline{display:flex;flex-direction:column}
.tl-item{display:grid;grid-template-columns:36px 1fr;gap:.9rem;padding:var(--s4) 0;border-bottom:1px solid var(--dv);align-items:start}
.tl-item:last-child{border-bottom:none}
.tl-icon{width:36px;height:36px;border-radius:50%;background:var(--sfo);display:grid;place-items:center;border:1px solid var(--bd);flex-shrink:0}
.tl-body p{color:var(--txm);font-size:var(--t-sm);margin-top:.3rem}
.tl-meta{font-size:var(--t-xs);color:var(--txf);margin-top:.3rem}

/* File grid */
.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
.file-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r-xl);overflow:hidden;transition:box-shadow var(--tr)}
.file-card:hover{box-shadow:var(--sh-md)}
.file-preview{aspect-ratio:16/10;background:var(--sfo);display:grid;place-items:center;overflow:hidden;color:var(--txm)}
.file-preview img{width:100%;height:100%;object-fit:cover}
.file-info{padding:.9rem}
.file-name{font-size:var(--t-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-meta{font-size:var(--t-xs);color:var(--txm);margin-top:.3rem}
.file-actions{display:flex;gap:.5rem;margin-top:.75rem}

/* Client chip */
.client-chip{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:var(--t-sm)}
.client-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* Search drop */
.search-drop{position:fixed;top:74px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 2rem));max-height:70vh;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:auto;z-index:999;display:none}
.search-drop.open{display:block;animation:scaleIn .15s ease}
.search-section{padding:.75rem}
.search-section+.search-section{border-top:1px solid var(--dv)}
.search-section-title{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--txm);font-weight:700;padding:.35rem .5rem .7rem}
.search-item{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem .9rem;border-radius:var(--r-lg);cursor:pointer;transition:background var(--tr)}
.search-item:hover,.search-item.selected{background:var(--sfo)}
.search-item-left{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.search-item-title{font-size:var(--t-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-item-sub{font-size:var(--t-xs);color:var(--txm)}
.search-empty{padding:2rem;text-align:center;color:var(--txm);font-size:var(--t-sm)}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:2rem}
.login-card{width:min(100%,440px);background:var(--sf);border:1px solid var(--dv);border-radius:1.25rem;padding:2rem 2.25rem;box-shadow:var(--sh-lg)}
.login-brand{display:flex;align-items:center;gap:.9rem;margin-bottom:1.75rem}
.login-brand h1{font-size:1.65rem;font-weight:700;letter-spacing:-.03em}

/* Setup */
.setup-wrap{min-height:100vh;display:grid;place-items:center;padding:2rem;background:var(--bg)}
.setup-card{width:min(100%,500px);background:var(--sf);border:1px solid var(--dv);border-radius:1.25rem;padding:2.25rem;box-shadow:var(--sh-lg)}
.setup-step{display:flex;align-items:center;gap:.75rem;padding:1rem;background:var(--sfo);border-radius:var(--r-lg);font-size:var(--t-sm)}
.setup-step.ok{background:color-mix(in srgb,var(--sc) 10%,transparent);color:var(--sc)}
.setup-step.fail{background:color-mix(in srgb,var(--er) 10%,transparent);color:var(--er)}
.setup-step.warn{background:color-mix(in srgb,var(--wa) 10%,transparent);color:var(--wa)}

/* Utils */
.muted{color:var(--txm)}.small{font-size:var(--t-sm)}.tiny{font-size:var(--t-xs)}.mono{font-variant-numeric:tabular-nums lining-nums}
.text-center{text-align:center}.fw-700{font-weight:700}
.mt-1{margin-top:var(--s2)}.mt-2{margin-top:var(--s4)}.mt-3{margin-top:var(--s6)}
.gap-2{gap:var(--s4)}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.empty-state{padding:var(--s12) var(--s8);text-align:center;color:var(--txm);display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.empty-state svg{color:var(--txf)}
.empty-state h3{color:var(--tx);font-size:var(--t-lg)}

/* Responsive */
@media(max-width:1100px){
  .app-layout{grid-template-columns:1fr}
  .kpi-grid,.grid-3{grid-template-columns:repeat(2,1fr)}
  .sidebar{position:fixed;left:-280px;top:0;bottom:0;width:280px;z-index:120;transition:left var(--tr)}
  .sidebar.open{left:0}
  .sidebar-overlay.open{display:block}
  .sidebar-close,.hamburger{display:grid}
  .split-7-5{grid-template-columns:1fr}
}
@media(max-width:700px){
  .kpi-grid,.grid-2,.grid-3,.field-row,.field-row-3{grid-template-columns:1fr}
  .main-content{padding:var(--s4)}
  .topbar{padding:0 var(--s4)}
  .topbar-search kbd{display:none}
  .page-head{flex-direction:column}
  .page-actions{width:100%}
  .page-actions .btn{flex:1}
  .search-drop{top:70px;width:calc(100% - 1rem);left:.5rem;transform:none}
}
