/* Docinhos da Michella | Identidade visual V1.1
   Cores retiradas da arte do adesivo fornecido pela marca:
   Rosa #D6576A, vinho #641E1E e branco #FFFFFF.
   Os tons de apoio (creme, blush, cinza) foram derivados para legibilidade.
*/
:root {
  --bg:#fff8f7;
  --surface:#ffffff;
  --ink:#42262b;
  --sub:#846a71;
  --line:#f0e2e3;
  --primary:#c84159;
  --primary-dark:#a82c43;
  --primary-light:#ffedf0;
  --nav:#541c25;
  --rose:#d6576a;
  --wine:#641e1e;
  --cream:#fff6f2;
  --radius:17px;
  --shadow:0 12px 34px rgba(104,31,47,.045);
}
html {font-family: "Segoe UI", Inter, Arial, sans-serif}
body {background:var(--bg); color:var(--ink)}
a:focus-visible, button:focus-visible, summary:focus-visible {outline:3px solid #f3a1ae; outline-offset:3px}
.sidebar {
  background:linear-gradient(180deg,#641e1e 0%,#4e1b27 55%,#411821 100%);
  color:#ffe7e9;
  padding-top:27px;
  border-right:1px solid rgba(255,255,255,.08);
}
.brand {align-items:center; gap:11px; padding:0 10px; margin-bottom:47px;}
.brand-mark {
  width:55px;height:55px;flex:0 0 55px;display:block;overflow:hidden;
  border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(17,4,7,.19);
}
.brand-mark img {display:block;width:100%;height:100%;object-fit:cover}
.brand-copy strong {font-size:16px;line-height:1.08;letter-spacing:-.2px;color:#fff6f5}
.brand-copy small {font-size:10px;line-height:1.4;color:#f7b8c0;margin-top:6px}
.sidebar-label {color:#e2aab2; font-size:10px; letter-spacing:1.35px}
.nav-item {color:#f8dadd;border:1px solid transparent;font-weight:600;}
.nav-item span {color:#e8a3af}
.nav-item:hover {color:#fff;background:rgba(255,255,255,.1)}
.nav-item.selected {color:#fff;background:rgba(255,230,235,.17);border-color:rgba(255,234,238,.16);box-shadow:inset 3px 0 0 #ffacb9}
.nav-item.selected span {color:#fff}
.sidebar-bottom {border-top:1px solid rgba(255,233,235,.2)}
.avatar {background:#db6173;color:white}
.account small {color:#e5acb6}
.logout-button {color:#f7cbd2}
.logout-button:hover {color:white}
.topbar {background:#fff;border-color:var(--line); min-height:108px}
.topbar h1 {color:#5e2530;font-size:25px}
.eyebrow {color:#b36474}
.page-intro h2,.panel-head h2 {color:#552731}
.page-intro h2 {font-size:23px}
.button {border-radius:11px;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
.button.primary {background:var(--primary);color:#fff;box-shadow:0 5px 12px rgba(200,65,89,.16)}
.button.primary:hover {background:var(--primary-dark);color:#fff;box-shadow:0 6px 16px rgba(200,65,89,.22)}
.button.secondary {color:var(--wine);border-color:#edd6d9;background:#fff}
.button.secondary:hover {color:var(--primary-dark);border-color:#eabac3;background:#fff4f5}
.button.danger {color:#9b293e;background:#fff1f3;border-color:#f5c9d0}
.button.danger:hover {background:#ffe5e9}
.panel,.stat-card {border-color:var(--line);background:var(--surface);box-shadow:var(--shadow)}
.panel {border-radius:18px}
.stat-card {border-radius:17px;position:relative;overflow:hidden}
.stat-card::before {content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#f0bac3}
.stat-card.highlight {background:linear-gradient(160deg,#fff0f2,#fff9f7 90%);border-color:#f3d0d5}
.stat-card.highlight::before {background:var(--primary)}
.stat-icon {border-radius:11px}
.stat-icon.purple {background:#ffe6eb;color:#be4057}
.stat-icon.green {background:#eaf5ed;color:#25865e}
.stat-icon.amber {background:#fff0dc;color:#b97a34}
.stat-icon.blue {background:#f9eaf0;color:#93536a}
.stat-card>span {color:#8d6570}
.stat-card>strong {color:#4d2430}
.stat-card>small {color:#947f82}
th {color:#a17a82;border-color:var(--line)}
td {border-color:#f5ecec;color:#66535b}
tbody tr:hover {background:#fff9f9}
.bold-cell,.money {color:#522c35}
.amount-due {color:#b8702d}
.amount-ok {color:#26805d}
.under-cell {color:#9d858b}
.text-link,.small-link,.tiny-details summary,.back-link {color:var(--primary-dark)}
.empty-box {background:#fff9f8;border-color:#eed9dc;color:#985267}
.stack-form label,label {color:#654750}
input:not([type=checkbox]),select,textarea {border-color:#e9d8dc;color:#4e3039;border-radius:10px;background:#fff}
input:focus,select:focus,textarea:focus {border-color:#d6576a;box-shadow:0 0 0 3px #ffebee}
input[type=checkbox] {accent-color:var(--primary)}
.required {color:var(--primary)}
.status-pill.active {background:#e7f6ed;color:#267e57}
.status-pill.inactive {background:#f4eced;color:#80646a}
.inline-edit,.inline-void {border-color:var(--line)}
.balance-hint {background:#fff2e6;color:#966126}
.remove-row {background:#f9eff0;color:#a77c84}
.remove-row:hover {background:#ffe3e7;color:#a43248}
.add-item {background:#fff3f5;border-color:#efb5c0;color:#a8334a}
.add-item:hover {background:#ffe8ed}
.sale-footer {background:#fff3f5}
.sale-footer strong,.summary-total strong {color:var(--primary-dark)}
.muted-panel {background:#fffbfa}
.flash {border-color:#efd9dd}
.flash.success {background:#eaf7ee;color:#28734b;border-color:#d2f0df}
.flash.error {background:#fff0f1;color:#a1384b;border-color:#f9dadd}
.error-symbol {background:#feecef;color:#bd4259}
.welcome-banner {
  display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;
  background:linear-gradient(115deg,#641e1e 0%,#923149 63%,#cb5269 100%);
  border-radius:20px;padding:29px 38px;margin-bottom:27px;min-height:204px;
  color:#fff;box-shadow:0 13px 28px rgba(101,30,40,.12);
}
.welcome-banner::before,.welcome-banner::after {content:"";position:absolute;pointer-events:none;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
.welcome-banner::before {width:360px;height:360px;right:-70px;top:-205px}
.welcome-banner::after {width:285px;height:285px;right:80px;bottom:-238px}
.welcome-content {position:relative;z-index:1}
.welcome-kicker {font-size:10px;letter-spacing:1.4px;font-weight:800;color:#ffd1da}
.welcome-banner h2 {font-size:26px;line-height:1.15;letter-spacing:-.6px;color:#fff;margin:13px 0 8px}
.welcome-banner p {font-size:12px;color:#ffe1e7;margin:0 0 18px;max-width:400px;line-height:1.6}
.banner-action {background:#fff;color:#81283d;border-color:#fff;padding:10px 14px}
.banner-action:hover {background:#fff0f2;color:#81283d}
.welcome-art {width:166px;height:166px;object-fit:contain;border-radius:50%;filter:drop-shadow(0 14px 14px rgba(60,4,20,.2));margin:0 20px 0 15px;position:relative;z-index:1}
/* Login */
.auth-container {
  background:radial-gradient(ellipse at 12% 19%,rgba(214,87,106,.12),transparent 38%),
             radial-gradient(ellipse at 90% 84%,rgba(100,30,30,.09),transparent 38%),
             #fff8f7;
  padding:30px 18px;
}
.login-card {
  max-width:448px;border-radius:25px;border:1px solid #f0dadd;
  box-shadow:0 24px 75px rgba(100,30,30,.105);
  padding:31px 40px 34px;
}
.login-brand-area {text-align:center}
.login-logo {width:135px;height:135px;display:block;overflow:hidden;border-radius:50%;background:#fff;margin:0 auto 19px;box-shadow:0 6px 23px rgba(100,30,30,.09)}
.login-logo img {display:block;width:100%;height:100%;object-fit:contain}
.login-card .eyebrow {letter-spacing:2px;font-size:10px;color:#b54b60}
.login-card h1 {font-size:29px;letter-spacing:-1.0px;line-height:1.14;margin:10px 0 9px;color:#5d292f}
.login-card h1 span {color:#c84159}
.login-brand-area p {color:#8b7077;font-size:12px;line-height:1.65;margin:0 0 22px}
.login-card .stack-form {gap:17px}
.login-card .stack-form label {text-align:left}
.login-card .stack-form .button {padding:13px}
.login-foot {font-size:11px;color:#a17e87;border-color:#f2e1e3;line-height:1.5;margin-top:26px}
@media(max-width:900px) {
  .welcome-banner {padding:26px 24px}
  .welcome-art {width:126px;height:126px;margin-right:5px}
}
@media(max-width:800px) {
  .sidebar {padding:13px 15px 12px}
  .brand {margin-bottom:12px;padding:0}
  .brand-mark {width:43px;height:43px;flex-basis:43px}
  .brand-copy strong {font-size:15px}
  .brand-copy br {display:none}
  .brand-copy small {font-size:10px;margin-top:3px}
  .nav-list {margin-bottom:0;padding-bottom:2px}
  .nav-list:last-of-type {display:flex}
  .nav-item.selected {box-shadow:inset 0 -2px 0 #ffacb9}
  .topbar {min-height:76px}
  .topbar h1 {font-size:20px}
  .welcome-banner h2 {font-size:24px}
}
@media(max-width:520px) {
  .topbar {gap:9px}
  .top-new {white-space:normal;line-height:1.2;max-width:135px;text-align:center}
  .welcome-banner {padding:23px 19px;min-height:0}
  .welcome-banner h2 {font-size:22px}
  .welcome-banner p {font-size:12px;max-width:270px}
  .welcome-art {display:none}
  .login-card {padding:26px 24px}
  .login-logo {height:115px;width:115px}
  .login-card h1 {font-size:26px}
}