:root {
    --public-ink: #17181c;
    --public-muted: #69717d;
    --public-line: #e5e7eb;
    --public-soft: #f5f6f8;
    --public-card: #fff;
    --public-purple: #6c4cff;
    --public-purple-soft: #f1eeff;
    --public-green: #15965a;
    --public-red: #dc3d4b;
    --public-shadow: 0 16px 42px rgba(17,24,39,.09);
}

body[data-surface] { color: var(--public-ink); background: #f4f5f7; }
body[data-surface] button { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
body[data-surface] button:active { transform: translateY(1px) scale(.995); }
body[data-surface] input,
body[data-surface] textarea,
body[data-surface] select { outline: none; }

/* Login */
body[data-surface="login"] .login-shell { background: #fff; box-shadow: 0 28px 80px rgba(17,24,39,.2); }
body[data-surface="login"] .brand-panel { background: linear-gradient(145deg,#15161a,#2c2545); }
body[data-surface="login"] .brand-panel::after { position: absolute; right: -90px; bottom: -110px; width: 340px; height: 340px; content: ""; background: radial-gradient(circle,rgba(108,76,255,.48),transparent 68%); }
body[data-surface="login"] .brand-content { position: relative; z-index: 2; }
body[data-surface="login"] .login-panel { background: radial-gradient(circle at 100% 0,rgba(108,76,255,.07),transparent 20rem),#fff; }
body[data-surface="login"] .login-form input { background: #f7f8fa; border-color: var(--public-line); border-radius: 12px; }
body[data-surface="login"] .login-form input:focus { background: #fff; border-color: var(--public-purple); box-shadow: 0 0 0 3px rgba(108,76,255,.1); }
body[data-surface="login"] .submit-button { background: var(--public-purple); border-radius: 12px; box-shadow: 0 11px 25px rgba(108,76,255,.25); }

/* Cadastro */
body[data-surface="register"] { background: radial-gradient(circle at 10% 10%,#332661,#17181c 48%,#101115); }
body[data-surface="register"] > div:first-child { max-width: 1040px !important; min-height: 620px !important; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 28px !important; box-shadow: 0 30px 90px rgba(0,0,0,.35) !important; }
body[data-surface="register"] > div:first-child > div:first-child { background: linear-gradient(145deg,#17181c,#2d2549) !important; }
body[data-surface="register"] > div:first-child > div:last-child { background: radial-gradient(circle at 100% 0,rgba(108,76,255,.08),transparent 21rem),#fff !important; }
body[data-surface="register"] h1 { color: var(--public-ink) !important; font-size: clamp(2rem,4vw,2.65rem) !important; }
body[data-surface="register"] #titulo-span { color: var(--public-purple) !important; }
body[data-surface="register"] form input,
body[data-surface="register"] form select { min-height: 47px; background: #f7f8fa !important; border: 1px solid var(--public-line) !important; border-radius: 11px !important; box-shadow: none !important; }
body[data-surface="register"] form input:focus,
body[data-surface="register"] form select:focus { background: #fff !important; border-color: var(--public-purple) !important; box-shadow: 0 0 0 3px rgba(108,76,255,.1) !important; }
body[data-surface="register"] form button[type="submit"] { background: var(--public-purple) !important; border-radius: 12px !important; box-shadow: 0 11px 25px rgba(108,76,255,.24) !important; }
body[data-surface="register"] #slider-bg { border-radius: 9px; }

/* Cardápio do cliente */
body[data-surface="menu"] { background: #f4f5f7; }
body[data-surface="menu"] #app-flow { width: min(100%, 760px); min-height: 100vh; margin: 0 auto; background: #fff; box-shadow: 0 0 55px rgba(17,24,39,.07); }
body[data-surface="menu"] .welcome-banner { min-height: 220px; overflow: hidden; border-radius: 0 0 28px 28px; }
body[data-surface="menu"] .overlay-gradient { background: linear-gradient(180deg,rgba(17,18,22,.03),rgba(17,18,22,.78)); }
body[data-surface="menu"] .logo-container { width: 70px; height: 70px; border: 4px solid rgba(255,255,255,.9); border-radius: 19px; box-shadow: 0 14px 34px rgba(0,0,0,.2); }
body[data-surface="menu"] .welcome-content { padding: 24px 18px 100px; }
body[data-surface="menu"] .menu-opt-card { min-height: 78px; padding: 14px !important; background: #fff !important; border: 1px solid var(--public-line) !important; border-radius: 16px !important; box-shadow: 0 7px 20px rgba(17,24,39,.055) !important; }
body[data-surface="menu"] .menu-opt-card:hover { border-color: #d8d1ff !important; box-shadow: 0 13px 28px rgba(61,46,129,.11) !important; transform: translateY(-2px); }
body[data-surface="menu"] .menu-opt-card > div:first-child { color: var(--public-purple) !important; background: var(--public-purple-soft) !important; border-radius: 13px !important; }
body[data-surface="menu"] #step-menu { background: #f4f5f7; }
body[data-surface="menu"] #category-scroll { gap: 7px; padding: 10px 14px 12px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--public-line); }
body[data-surface="menu"] #category-scroll button { min-height: 37px; padding-inline: 14px; border-radius: 11px !important; }
body[data-surface="menu"] #menu-items { display: block; width: 100%; min-width: 0; padding: 4px 14px 110px; }
body[data-surface="menu"] #menu-items > .menu-category-section { display: block; width: 100%; min-width: 0; }
body[data-surface="menu"] .menu-offers-row,
body[data-surface="menu"] .menu-products-grid { width: 100%; min-width: 0; }
body[data-surface="menu"] #floating-cart { right: max(14px,calc((100vw - 730px)/2)); bottom: 14px; left: max(14px,calc((100vw - 730px)/2)); width: auto; padding: 13px 17px; background: var(--public-purple) !important; border-radius: 16px !important; box-shadow: 0 17px 36px rgba(108,76,255,.28) !important; }
body[data-surface="menu"] .checkout-card { border: 1px solid var(--public-line) !important; border-radius: 17px !important; box-shadow: 0 7px 20px rgba(17,24,39,.055) !important; }
body[data-surface="menu"] .input-modern { min-height: 45px; background: #f7f8fa !important; border: 1px solid var(--public-line) !important; border-radius: 11px !important; box-shadow: none !important; }
body[data-surface="menu"] .input-modern:focus { background: #fff !important; border-color: var(--public-purple) !important; box-shadow: 0 0 0 3px rgba(108,76,255,.1) !important; }
body[data-surface="menu"] #drawer-overlay,
body[data-surface="menu"] #modal-info-loja { background: rgba(17,18,22,.58) !important; backdrop-filter: blur(5px); }
body[data-surface="menu"] #product-drawer { border-radius: 24px 24px 0 0 !important; box-shadow: 0 -22px 60px rgba(17,24,39,.22) !important; }
body[data-surface="menu"] #modal-info-content { border-radius: 22px !important; box-shadow: 0 25px 70px rgba(17,24,39,.24) !important; }

/* TOTEM */
body[data-surface="totem"] { background: #eef0f3; }
body[data-surface="totem"] #totem-app { background: #fff; box-shadow: 0 0 70px rgba(17,24,39,.1); }
body[data-surface="totem"] .start-hero { border-radius: 0 0 34px 34px; }
body[data-surface="totem"] .start-overlay { background: linear-gradient(180deg,rgba(17,18,22,.08),rgba(17,18,22,.83)); }
body[data-surface="totem"] .service-card { border: 1px solid var(--public-line); border-radius: 22px; box-shadow: var(--public-shadow); }
body[data-surface="totem"] .service-card:hover { border-color: var(--public-purple); box-shadow: 0 18px 40px rgba(72,55,150,.17); transform: translateY(-3px); }
body[data-surface="totem"] .service-card > .material-icons-outlined { color: var(--public-purple); background: var(--public-purple-soft); }
body[data-surface="totem"] .totem-topbar,
body[data-surface="totem"] .totem-cart { border-color: var(--public-line); box-shadow: 0 8px 28px rgba(17,24,39,.06); }
body[data-surface="totem"] .totem-products-grid > article,
body[data-surface="totem"] .totem-products-grid > div { border-color: var(--public-line); border-radius: 18px; box-shadow: 0 8px 22px rgba(17,24,39,.06); }
body[data-surface="totem"] .product-modal-backdrop { background: rgba(17,18,22,.6); backdrop-filter: blur(6px); }
body[data-surface="totem"] .product-modal-content { border-radius: 24px; box-shadow: 0 28px 80px rgba(17,24,39,.25); }
body[data-surface="totem"] .add-product-btn,
body[data-surface="totem"] .keyboard-ok { background: var(--public-purple); box-shadow: 0 12px 27px rgba(108,76,255,.24); }

/* Rastreamento */
body[data-surface="tracking"] { background: radial-gradient(circle at 50% 0,rgba(108,76,255,.11),transparent 27rem),#f4f5f7 !important; }
body[data-surface="tracking"] #text-state > section { padding: 27px !important; border: 1px solid var(--public-line) !important; border-radius: 22px !important; box-shadow: var(--public-shadow) !important; }
body[data-surface="tracking"] #text-state > section > div:first-child { color: var(--public-purple) !important; background: var(--public-purple-soft) !important; border-radius: 17px !important; }
body[data-surface="tracking"] .tracking-step { grid-template-columns: 42px 1fr; gap: 13px; }
body[data-surface="tracking"] .tracking-step-icon { width: 42px; height: 42px; border-radius: 13px; }
body[data-surface="tracking"] .tracking-step.active .tracking-step-icon { background: var(--public-purple); box-shadow: 0 11px 25px rgba(108,76,255,.25); }
body[data-surface="tracking"] .panel { padding: 18px !important; border: 1px solid rgba(229,231,235,.94) !important; border-radius: 21px !important; box-shadow: 0 20px 50px rgba(17,24,39,.18) !important; }

/* Aplicativo do entregador */
body[data-surface="driver-app"],
body[data-surface="driver-earnings"] { background: radial-gradient(circle at 100% 0,rgba(108,76,255,.08),transparent 25rem),#f4f5f7 !important; }
body[data-surface="driver-app"] > header { background: rgba(255,255,255,.97) !important; border-bottom: 1px solid var(--public-line); box-shadow: 0 7px 23px rgba(17,24,39,.055) !important; }
body[data-surface="driver-app"] #lista-pedidos > div { border: 1px solid var(--public-line) !important; border-radius: 18px !important; box-shadow: 0 9px 25px rgba(17,24,39,.07) !important; }
body[data-surface="driver-app"] [id^="modal-"] { background: rgba(17,18,22,.58) !important; backdrop-filter: blur(6px); }
body[data-surface="driver-app"] [id$="-content"] { border: 1px solid rgba(255,255,255,.8) !important; border-radius: 22px !important; box-shadow: 0 25px 75px rgba(17,24,39,.27) !important; }
body[data-surface="driver-app"] .nav-top,
body[data-surface="driver-app"] .nav-bottom { border-color: rgba(229,231,235,.94); border-radius: 18px; box-shadow: 0 18px 45px rgba(17,24,39,.17); }
body[data-surface="driver-earnings"] > header { padding-top: max(30px,env(safe-area-inset-top)) !important; color: #fff; background: linear-gradient(145deg,#17181c,#2d2549) !important; border-radius: 0 0 28px 28px !important; box-shadow: 0 15px 38px rgba(17,24,39,.2) !important; }
body[data-surface="driver-earnings"] > header #val-total { color: #fff !important; }
body[data-surface="driver-earnings"] main > div,
body[data-surface="driver-earnings"] main > section { border: 1px solid var(--public-line) !important; border-radius: 17px !important; box-shadow: 0 8px 23px rgba(17,24,39,.06) !important; }

@media (max-width: 640px) {
    body[data-surface="register"] { padding: 0 !important; background: #fff; }
    body[data-surface="register"] > div:first-child { min-height: 100vh !important; border: 0; border-radius: 0 !important; box-shadow: none !important; }
    body[data-surface="menu"] #app-flow { box-shadow: none; }
    body[data-surface="menu"] #menu-items { display: block; }
    body[data-surface="totem"] .start-actions { gap: 12px; padding-inline: 16px; }
    body[data-surface="tracking"] #text-state { padding: 13px !important; }
    body[data-surface="tracking"] #text-state > section { padding: 22px 17px !important; }
}

@media (max-width: 370px) {
    body[data-surface="menu"] #menu-items { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    body[data-surface] * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}