/* FASE 4.4 — Alinhar tokens --ds-* com flow.css. Por agora flow.css mantém os seus próprios tokens. Não importa ds.css para evitar colisões. */ /* ═══════════════════════════════════════════════════════════════════════════ Velora Flow · Design System v2 Temas: claro (defeito) + escuro via (resolvido em JS) ═══════════════════════════════════════════════════════════════════════════ */ :root{ --purple:#7c3aed;--purple-2:#6d28d9;--purple-3:#5b21b6;--magenta:#c026d3; --grad:linear-gradient(135deg,#a855f7 0%,#7c3aed 55%,#6d28d9 100%); --grad-vivid:linear-gradient(135deg,#d946ef,#8b5cf6 55%,#6d28d9); --grad-soft:linear-gradient(135deg,#1b132c,#150e22); --amber:#f59e0b;--amber-2:#d97706; --ink:#f4f4f7;--ink-2:#c5c4cb;--muted:#8e8c99;--line:#1a1a24;--line-2:#252533; --bg:#000000;--bg-2:#09090c;--card:#0e0e12;--card-2:#131317; --ok:#15a34a;--ok-t:#15803d;--ok-bg:#e7f8ee; --warn:#d97706;--warn-t:#b45309;--warn-bg:#fff5e6; --bad:#e11d48;--bad-t:#be123c;--bad-bg:#fdecf0; --info:#4f46e5;--info-t:#4338ca;--info-bg:#eef0fe; --halo:rgba(255,255,255,0.06); --sh-sm:0 1px 2px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4); --sh:0 2px 6px rgba(0,0,0,.6),0 12px 28px -10px rgba(0,0,0,.7); --sh-lg:0 8px 20px -8px rgba(0,0,0,.8),0 24px 48px -16px rgba(0,0,0,.9); --glass:rgba(0,0,0,0.85);--glass-b:rgba(37,36,48,0.6); --tab-bg:rgba(10,10,13,0.92); --bubble:#1a1a24;--bubble-ink:#f4f4f7; --r:18px;--r-lg:24px;--r-sm:13px; --safe-b:env(safe-area-inset-bottom,0px); color-scheme:dark; } :root[data-theme=dark]{ --grad-soft:linear-gradient(135deg,rgba(139,92,246,.12),rgba(109,40,217,.16)); --ink:#f2eefc;--ink-2:#cfc8e6;--muted:#948cb4;--line:#21183c;--line-2:#2d2152; --bg:#000000;--bg-2:#07050e;--card:#0e0a18;--card-2:#130e20; --ok:#34d399;--ok-t:#6ee7b7;--ok-bg:rgba(16,185,129,.14); --warn:#fbbf24;--warn-t:#fcd34d;--warn-bg:rgba(245,158,11,.13); --bad:#fb7185;--bad-t:#fda4af;--bad-bg:rgba(225,29,72,.16); --info:#a5b4fc;--info-t:#c7d2fe;--info-bg:rgba(99,102,241,.15); --halo:rgba(124,58,237,0.18); --sh-sm:0 1px 2px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4); --sh:0 2px 6px rgba(0,0,0,.6),0 12px 28px -10px rgba(0,0,0,.7); --sh-lg:0 8px 20px -8px rgba(0,0,0,.8),0 24px 48px -16px rgba(0,0,0,.9); --glass:rgba(0,0,0,0.85);--glass-b:rgba(45,33,82,0.6); --tab-bg:rgba(10,8,16,0.92); --bubble:#1c1533;--bubble-ink:#f2eefc; color-scheme:dark; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%} body{ margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;letter-spacing:-.01em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; padding-bottom:calc(84px + var(--safe-b)); background-image:radial-gradient(1200px 380px at 50% -120px,var(--halo) 0%,transparent 70%); background-repeat:no-repeat; transition:background-color .25s ease; } a{color:inherit;text-decoration:none} button{font-family:inherit} img,svg{vertical-align:middle} .app{max-width:480px;margin:0 auto;min-height:100vh;position:relative} .icon{width:22px;height:22px;display:inline-block;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .num{font-variant-numeric:tabular-nums} /* ── Topbar ──────────────────────────────────────────────────────────────── */ .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:11px; padding:13px 18px 12px;background:var(--glass);backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--glass-b)} .topbar .mark{width:36px;height:36px;display:flex;align-items:center;justify-content:center; background:transparent;border-radius:50%;box-shadow:none;flex:none} .topbar .mark img, .topbar .mark svg{width:100%;height:100%;object-fit:contain} .topbar h1{font-size:17px;margin:0;font-weight:800;letter-spacing:-.4px;line-height:1.05} .topbar h1 small{display:block;font-size:10px;font-weight:700;color:var(--purple);letter-spacing:1.4px;text-transform:uppercase;margin-top:1px} :root[data-theme=dark] .topbar h1 small{color:#b794f6} .topbar .spacer{flex:1} .chip-credits{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line-2); color:var(--purple-2);font-weight:800;font-size:13px;padding:7px 13px 7px 10px;border-radius:999px;box-shadow:var(--sh-sm); transition:transform .12s} .chip-credits:active{transform:scale(.96)} :root[data-theme=dark] .chip-credits{color:#c4b5fd} .chip-credits .icon{width:15px;height:15px;stroke:var(--magenta)} .chip-credits b{font-size:14px;letter-spacing:-.3px;font-variant-numeric:tabular-nums} .chip-credits.low{border-color:rgba(225,29,72,.35);color:var(--bad-t);background:var(--bad-bg)} .chip-credits.low .icon{stroke:var(--bad)} /* ── Layout ──────────────────────────────────────────────────────────────── */ .view{padding:18px 16px 8px;animation:fade .32s cubic-bezier(.16,1,.3,1)} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .view-title{font-size:23px;font-weight:800;letter-spacing:-.6px;margin:6px 2px 3px} .view-sub{color:var(--muted);font-size:13px;margin:0 2px 18px} .view-sub a{color:var(--muted);font-weight:600} .section-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.9px; color:var(--muted);margin:24px 4px 11px;display:flex;align-items:center;gap:7px} .section-label .icon{width:15px;height:15px;stroke:var(--purple)} .section-label .right{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:700;font-size:12px} .section-label .right a{color:var(--purple-2)} :root[data-theme=dark] .section-label .right a{color:#c4b5fd} /* ── Cards ───────────────────────────────────────────────────────────────── */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:6px 18px;margin-bottom:14px} .card.pad{padding:18px} .card.flat{box-shadow:none} /* ── Hero (painel Hoje) ──────────────────────────────────────────────────── */ .hero{position:relative;overflow:hidden;background:var(--grad-vivid);color:#fff;border-radius:var(--r-lg); padding:22px 22px 20px;box-shadow:0 20px 44px -18px rgba(124,58,237,.7);margin-bottom:18px} .hero::before{content:"";position:absolute;inset:0;background: radial-gradient(420px 200px at 88% -30%,rgba(255,255,255,.32),transparent 60%), radial-gradient(300px 220px at 0% 120%,rgba(255,255,255,.14),transparent 60%)} .hero>*{position:relative;z-index:1} .hero .h-label{font-size:12px;letter-spacing:.4px;font-weight:700;opacity:.92;text-transform:capitalize} .hero .h-big{font-size:32px;font-weight:800;letter-spacing:-1.2px;margin:7px 0 0;line-height:1.08} .hero .h-next{display:flex;align-items:center;gap:8px;margin-top:12px;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.2);border-radius:13px;padding:10px 13px;font-size:13px;font-weight:600;backdrop-filter:blur(4px)} .hero .h-next .icon{width:16px;height:16px;flex:none;opacity:.95} .hero .h-next b{font-weight:800} .hero .h-next .eta{margin-left:auto;font-size:11.5px;font-weight:800;background:rgba(255,255,255,.22); padding:4px 9px;border-radius:999px;white-space:nowrap} .hero .h-row{display:flex;gap:10px;margin-top:14px} .hero .h-row>*{flex:1;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18); border-radius:14px;padding:11px 12px;backdrop-filter:blur(4px);color:#fff;text-align:left} .hero .h-row .n{font-size:21px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums} .hero .h-row .l{font-size:10px;opacity:.9;text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-top:2px} /* ── Alertas (validade, saldo baixo) ─────────────────────────────────────── */ .alert{display:flex;gap:11px;align-items:flex-start;border-radius:15px;padding:13px 15px;margin-bottom:12px; font-size:13px;line-height:1.45;border:1px solid transparent} .alert .icon{width:19px;height:19px;flex:none;margin-top:1px} .alert .a-body{flex:1;min-width:0} .alert .a-t{font-weight:800;font-size:13.5px;margin-bottom:1px} .alert .a-cta{flex:none;align-self:center;font-size:12px;font-weight:800;padding:8px 13px;border-radius:10px;white-space:nowrap} .alert.warn{background:var(--warn-bg);color:var(--warn-t);border-color:rgba(217,119,6,.22)} .alert.warn .a-cta{background:var(--warn);color:#fff} .alert.danger{background:var(--bad-bg);color:var(--bad-t);border-color:rgba(225,29,72,.22)} .alert.danger .a-cta{background:var(--bad);color:#fff} .alert.info{background:var(--info-bg);color:var(--info-t);border-color:rgba(79,70,229,.18)} .alert.info .a-cta{background:var(--info);color:#fff} /* ── Paginação ───────────────────────────────────────────────────────────── */ .pager{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:12px 4px 4px;margin-bottom:4px} .pager-btn{font-size:13px;font-weight:700;color:var(--purple-2);padding:8px 14px; background:var(--card);border:1px solid var(--line-2);border-radius:10px; transition:transform .1s} .pager-btn:active{transform:scale(.95)} :root[data-theme=dark] .pager-btn{color:#c4b5fd} .pager-info{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} /* ── Carteira ─────────────────────────────────────────────────────────────── */ .wallet-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:18px; padding:16px 18px 14px;margin-bottom:14px;box-shadow:var(--sh);text-decoration:none; color:var(--ink);transition:border-color .15s} .wallet-card:active{opacity:.9} .wc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .wc-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px} .wc-cta{font-size:11px;font-weight:700;color:var(--purple-2);display:flex;align-items:center;gap:3px} .wc-cta .icon{width:13px;height:13px;stroke:var(--magenta)} :root[data-theme=dark] .wc-cta{color:#c4b5fd} .wc-total-row{display:flex;align-items:baseline;gap:6px;margin-bottom:14px} .wc-total-num{font-size:28px;font-weight:900;letter-spacing:-1px;line-height:1} .wc-total-label{font-size:12px;color:var(--muted);font-weight:600} .wc-sections{display:flex;gap:0;align-items:stretch} .wc-section{flex:1;min-width:0} .wc-sep{width:1px;background:var(--line);margin:0 14px;flex:none} .wcs-label{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px} .wcs-value{font-size:22px;font-weight:900;letter-spacing:-.5px;line-height:1;color:var(--ink)} .wcs-bonus{color:#00D26A} :root[data-theme=dark] .wcs-bonus{color:#4ade80} .wcs-expired{color:var(--bad-t)} .wcs-none{color:var(--muted);font-size:18px} .wcs-sub{font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.35} .wcs-sub-warn{color:#d97706;font-weight:600} :root[data-theme=dark] .wcs-sub-warn{color:#fbbf24} .wcs-sub-expired{color:var(--bad-t)} /* ── Pacotes de créditos ─────────────────────────────────────────────────── */ .flow-tiers-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-bottom:2px;margin-bottom:14px} .flow-tiers-row::-webkit-scrollbar{display:none} .flow-tier-card{flex:0 0 auto;min-width:90px;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:11px 13px 11px;text-align:left;box-shadow:var(--sh-sm); transition:transform .12s,border-color .15s;color:var(--ink);text-decoration:none} .flow-tier-card:active{transform:scale(.95)} .flow-tier-card:hover{border-color:var(--magenta)} .ftc-amount{font-size:11px;font-weight:800;color:var(--ink-2);margin-bottom:5px} .ftc-paid{font-size:11px;font-weight:600;color:var(--ink-2)} .ftc-bonus{font-size:10.5px;font-weight:700;color:#00D26A;margin-top:3px; background:rgba(0,210,106,.10);border-radius:5px;padding:1px 5px;display:inline-block} :root[data-theme=dark] .ftc-bonus{color:#4ade80;background:rgba(0,210,106,.12)} .ftc-total-line{font-size:11px;font-weight:700;color:var(--muted);margin-top:6px;border-top:1px solid var(--line);padding-top:5px} .ftc-total-line b{color:var(--ink);font-size:13px} /* ── Ações rápidas (Hoje) ────────────────────────────────────────────────── */ .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:6px} .quick{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--card); border:1px solid var(--line);border-radius:16px;padding:13px 6px 11px;box-shadow:var(--sh-sm); font-size:10.5px;font-weight:700;color:var(--ink-2);text-align:center;transition:transform .12s} .quick:active{transform:scale(.95)} .quick .q-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft)} .quick .q-ic .icon{width:19px;height:19px;stroke:var(--purple-2)} :root[data-theme=dark] .quick .q-ic .icon{stroke:#c4b5fd} .quick.amber .q-ic{background:rgba(245,158,11,.14)} .quick.amber .q-ic .icon{stroke:var(--amber-2);fill:rgba(245,158,11,.35)} /* ── Linha de marcação ───────────────────────────────────────────────────── */ .appt{display:flex;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);transition:opacity .15s} .appt:last-child{border-bottom:none} .appt:active{opacity:.6} .appt .time{flex:none;width:52px;text-align:center;padding:7px 0;background:var(--bg-2);border-radius:12px} .appt .time .hh{font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--purple-2);font-variant-numeric:tabular-nums} :root[data-theme=dark] .appt .time .hh{color:#c4b5fd} .appt .time .dd{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:700;margin-top:1px} .appt .body{flex:1;min-width:0} .appt .body .nm{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .appt .body .sv{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .appt.now{position:relative} .appt.now::before{content:"";position:absolute;left:-18px;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--grad)} /* ── Badges de estado ────────────────────────────────────────────────────── */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;white-space:nowrap;letter-spacing:-.1px} .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .badge.Pendente{background:var(--warn-bg);color:var(--warn-t)} .badge.Confirmado{background:var(--ok-bg);color:var(--ok-t)} .badge.Cancelado{background:var(--bad-bg);color:var(--bad-t)} .badge.NaoCompareceu{background:var(--grad-soft);color:var(--purple-2)} :root[data-theme=dark] .badge.NaoCompareceu{color:#c4b5fd} .badge.Concluido{background:var(--info-bg);color:var(--info-t)} .badge.plain{background:var(--bg-2);color:var(--muted)} .badge.Enviando{background:var(--info-bg);color:var(--info-t)} .badge.Enviando::before{animation:pulse 1.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}} .badge.sm{font-size:10px;padding:4px 8px} /* ── Botões ──────────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%; background:var(--grad);color:#fff;border:none;border-radius:15px;padding:15px 18px;font-size:15px; font-weight:700;letter-spacing:-.2px;cursor:pointer;box-shadow:0 10px 22px -8px rgba(124,58,237,.6); transition:transform .08s,box-shadow .2s,opacity .2s} .btn:active{transform:translateY(1px) scale(.99)} .btn[disabled]{opacity:.55;pointer-events:none} .btn .icon{width:19px;height:19px;stroke-width:2.1} .btn.ghost{background:var(--card);color:var(--purple-2);border:1.5px solid var(--line-2);box-shadow:var(--sh-sm)} :root[data-theme=dark] .btn.ghost{color:#c4b5fd} .btn.soft{background:var(--grad-soft);color:var(--purple-2);box-shadow:none;border:1px solid var(--line-2)} :root[data-theme=dark] .btn.soft{color:#c4b5fd} .btn.sm{width:auto;padding:9px 15px;font-size:13px;border-radius:11px;box-shadow:none} .btn.danger{background:var(--bad-bg);color:var(--bad-t);box-shadow:none} .btn.vivid{background:var(--grad-vivid);box-shadow:0 8px 20px -6px rgba(124,58,237,.65)} .btn-row{display:flex;gap:10px}.btn-row .btn{flex:1} /* ── FAB ─────────────────────────────────────────────────────────────────── */ .fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + var(--safe-b));z-index:30; width:auto;padding:14px 22px;border-radius:999px;font-weight:800; box-shadow:0 12px 28px -6px rgba(124,58,237,.65)} .fab .icon{width:18px;height:18px} /* ── Tabbar (5 separadores) ──────────────────────────────────────────────── */ .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;max-width:480px;margin:0 auto; padding:9px 8px calc(10px + var(--safe-b));background:var(--tab-bg); backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px); border-top:1px solid var(--line-2);box-shadow:0 -6px 24px -16px rgba(91,33,182,.3)} .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px 5px; color:var(--muted);font-size:10px;font-weight:700;letter-spacing:-.1px;transition:color .15s;position:relative;border-radius:12px} .tabbar a .icon{width:23px;height:23px;stroke-width:1.9;transition:transform .18s} .tabbar a.active{color:var(--purple-2)} :root[data-theme=dark] .tabbar a.active{color:#c4b5fd} .tabbar a.active::after{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%); width:18px;height:3px;border-radius:0 0 4px 4px;background:var(--grad)} .tabbar a.active .icon{transform:translateY(-1px);stroke-width:2.2} /* ── Segmented control ───────────────────────────────────────────────────── */ .seg{display:flex;background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;padding:4px;gap:3px;margin-bottom:16px} .seg a,.seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px; border:none;background:transparent;border-radius:11px;font-size:12.5px;font-weight:750;color:var(--muted); cursor:pointer;white-space:nowrap;transition:all .18s} .seg .icon{width:15px;height:15px} .seg a.active,.seg button.active{background:var(--card);color:var(--purple-2);box-shadow:var(--sh-sm)} :root[data-theme=dark] .seg a.active,:root[data-theme=dark] .seg button.active{color:#c4b5fd} .seg a.amber.active{color:var(--amber-2)} /* ── Formulários ─────────────────────────────────────────────────────────── */ .field{margin-bottom:15px} .field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px} .field .hint{font-weight:500;color:var(--muted);font-size:11.5px} .input,select,textarea{width:100%;border:1.5px solid var(--line-2);border-radius:13px;padding:13px 14px; font-size:15px;font-family:inherit;background:var(--card);color:var(--ink);outline:none; transition:border-color .15s,box-shadow .15s;appearance:none} .input:focus,select:focus,textarea:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(124,58,237,.12)} .input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7} select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238b86a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:40px} textarea{resize:vertical;min-height:92px;line-height:1.5} .row2{display:flex;gap:12px}.row2>*{flex:1} .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)} .toggle-row:last-child{border-bottom:none} .toggle-row .tl{font-weight:650;font-size:14px} .toggle-row .ts{font-size:12px;color:var(--muted);margin-top:1px} .switch{position:relative;width:46px;height:28px;flex:none} .switch input{opacity:0;width:0;height:0} .switch .sl{position:absolute;inset:0;background:var(--line-2);border-radius:999px;transition:.22s;cursor:pointer} .switch .sl::before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.22s;box-shadow:0 2px 5px rgba(0,0,0,.18)} .switch input:checked+.sl{background:var(--grad)} .switch input:checked+.sl::before{transform:translateX(18px)} .counter{font-size:12px;font-weight:700;color:var(--muted);text-align:right;margin-top:7px;font-variant-numeric:tabular-nums} .counter.warn{color:var(--bad)} .counter.near{color:var(--warn)} /* Chips de horas rápidas */ .time-chips{display:flex;gap:7px;overflow-x:auto;padding:8px 0 2px;scrollbar-width:none} .time-chips::-webkit-scrollbar{display:none} .time-chips button{flex:none;background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink-2); padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums} .time-chips button:active{background:var(--grad-soft)} /* ── Bolha de pré-visualização SMS ───────────────────────────────────────── */ .sms-preview{background:var(--card-2);border:1px solid var(--line);border-radius:15px;padding:13px 14px;margin:4px 0 14px} .sms-preview .sp-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:9px;display:flex;align-items:center;gap:6px} .sms-preview .sp-label .icon{width:13px;height:13px} .sms-preview .sp-sender{font-size:11px;font-weight:800;color:var(--purple-2);margin:0 0 5px 4px} :root[data-theme=dark] .sms-preview .sp-sender{color:#c4b5fd} .bubble{position:relative;background:var(--bubble);color:var(--bubble-ink);border-radius:16px 16px 16px 5px; padding:11px 14px;font-size:13.5px;line-height:1.5;max-width:88%;word-wrap:break-word;white-space:pre-wrap} .bubble:empty::before{content:"A sua mensagem aparece aqui…";color:var(--muted);font-style:italic} /* ── Day strip (Agenda) ──────────────────────────────────────────────────── */ .daystrip{display:flex;gap:7px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none;scroll-snap-type:x proximity} .daystrip::-webkit-scrollbar{display:none} .dcell{flex:none;width:56px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px; background:var(--card);border:1.5px solid var(--line-2);border-radius:15px;padding:9px 4px 8px; box-shadow:var(--sh-sm);transition:transform .12s} .dcell:active{transform:scale(.94)} .dcell .dw{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)} .dcell .dn{font-size:17px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums} .dcell .dot{width:5px;height:5px;border-radius:50%;background:transparent;margin-top:2px} .dcell.has .dot{background:var(--magenta)} .dcell.active{background:var(--grad);border-color:transparent;box-shadow:0 8px 18px -6px rgba(124,58,237,.6)} .dcell.active .dw,.dcell.active .dn{color:#fff} .dcell.active .dot{background:rgba(255,255,255,.85)} .dcell.today:not(.active){border-color:var(--purple)} /* ── Filtros pill ────────────────────────────────────────────────────────── */ .filters{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none} .filters::-webkit-scrollbar{display:none} .filter{flex:none;background:var(--card);border:1.5px solid var(--line-2);color:var(--ink-2);padding:9px 15px; border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:var(--sh-sm)} .filter.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 14px -6px rgba(124,58,237,.6)} /* ── Toast (flash) ───────────────────────────────────────────────────────── */ .toast-zone{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;transform:translateX(-50%); z-index:90;width:calc(100% - 28px);max-width:452px;display:flex;flex-direction:column;gap:8px;pointer-events:none} .toast{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-radius:15px;font-size:13.5px; font-weight:600;line-height:1.4;box-shadow:var(--sh-lg);border:1px solid transparent;pointer-events:auto; animation:toastIn .38s cubic-bezier(.16,1,.3,1)} .toast .icon{width:18px;height:18px;flex:none;margin-top:1px} .toast.success{background:var(--ok-bg);color:var(--ok-t);border-color:rgba(21,163,74,.25)} .toast.error{background:var(--bad-bg);color:var(--bad-t);border-color:rgba(225,29,72,.25)} .toast.warn{background:var(--warn-bg);color:var(--warn-t);border-color:rgba(217,119,6,.25)} .toast.hide{animation:toastOut .3s ease forwards} @keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}} @keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.97)}} /* ── Listas ──────────────────────────────────────────────────────────────── */ .list-item{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)} .list-item:last-child{border-bottom:none} .avatar{width:44px;height:44px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center; background:var(--grad-soft);color:var(--purple-2);font-weight:800;font-size:15px;letter-spacing:-.3px} :root[data-theme=dark] .avatar{color:#c4b5fd} .avatar.ic .icon{width:20px;height:20px;stroke:var(--purple-2)} :root[data-theme=dark] .avatar.ic .icon{stroke:#c4b5fd} .avatar.cake{background:rgba(245,158,11,.14);color:var(--amber-2)} .list-item .body{flex:1;min-width:0} .list-item .body .nm{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .list-item .body .mt{font-size:12.5px;color:var(--muted);margin-top:1px} .list-item .arrow{color:var(--line-2)}.list-item .arrow .icon{width:18px;height:18px;stroke-width:2.4} /* ── Seleção de contactos (campanhas) ────────────────────────────────────── */ .check-list{max-height:284px;overflow-y:auto;border:1.5px solid var(--line-2);border-radius:13px;background:var(--card)} .check-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid var(--line);cursor:pointer} .check-item:last-child{border-bottom:none} .check-item input{position:absolute;opacity:0;pointer-events:none} .check-item .cbox{width:22px;height:22px;flex:none;border:2px solid var(--line-2);border-radius:7px; display:flex;align-items:center;justify-content:center;transition:all .15s;background:var(--card)} .check-item .cbox svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:all .15s} .check-item input:checked~.cbox{background:var(--grad);border-color:transparent} .check-item input:checked~.cbox svg{opacity:1;transform:scale(1)} .check-item .ci-body{flex:1;min-width:0} .check-item .ci-nm{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .check-item .ci-ph{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums} .check-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 2px 6px;font-size:12px;color:var(--muted);font-weight:600} .check-tools button{background:none;border:none;color:var(--purple-2);font-weight:800;font-size:12px;cursor:pointer;padding:4px 6px} :root[data-theme=dark] .check-tools button{color:#c4b5fd} /* ── Histórico ───────────────────────────────────────────────────────────── */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px} .stat{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:12px 10px;box-shadow:var(--sh-sm);text-align:center} .stat .s-n{font-size:19px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums} .stat .s-l{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-top:2px} .stat.ok .s-n{color:var(--ok-t)} .stat.bad .s-n{color:var(--bad-t)} .hist{border-bottom:1px solid var(--line)} .hist:last-child{border-bottom:none} .hist summary{display:flex;gap:12px;align-items:center;padding:13px 0;cursor:pointer;list-style:none} .hist summary::-webkit-details-marker{display:none} .hist .h-body{flex:1;min-width:0} .hist .h-nm{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hist .h-mt{font-size:11.5px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums} .hist .h-detail{padding:2px 0 14px;animation:fade .25s ease} .hist .h-msg{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px; font-size:12.5px;line-height:1.5;margin-bottom:10px;white-space:pre-wrap;word-wrap:break-word} .hist .h-meta{display:flex;flex-wrap:wrap;gap:6px} .hist .h-meta span{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg-2); border-radius:8px;padding:4px 9px;font-variant-numeric:tabular-nums} .progress{height:6px;border-radius:99px;background:var(--bg-2);overflow:hidden;margin-top:8px} .progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34d399,#10b981);transition:width .6s cubic-bezier(.16,1,.3,1)} /* Destinatários no detalhe do histórico */ .rcp-list{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);max-height:220px;overflow-y:auto} .rcp{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600} .rcp:last-child{border-bottom:none} /* ── Timeline de lembretes (detalhe marcação) ────────────────────────────── */ .tl{padding:4px 0 8px} .tl-item{display:flex;gap:12px;position:relative;padding:0 0 18px 2px} .tl-item:last-child{padding-bottom:6px} .tl-item::before{content:"";position:absolute;left:12px;top:24px;bottom:0;width:2px;background:var(--line)} .tl-item:last-child::before{display:none} .tl-dot{width:22px;height:22px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--bg-2);border:2px solid var(--line-2);z-index:1} .tl-dot svg{width:11px;height:11px;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none} .tl-item.sent .tl-dot{background:var(--ok-bg);border-color:var(--ok)} .tl-item.sent .tl-dot svg{stroke:var(--ok)} .tl-item.scheduled .tl-dot{background:var(--info-bg);border-color:var(--info)} .tl-item.scheduled .tl-dot svg{stroke:var(--info)} .tl-item.pending .tl-dot{border-color:var(--warn)} .tl-item.pending .tl-dot svg{stroke:var(--warn)} .tl-item.expired .tl-dot{background:var(--bad-bg);border-color:var(--bad)} .tl-item.expired .tl-dot svg{stroke:var(--bad)} .tl-item.off{opacity:.45} .tl-item.off .tl-dot svg{stroke:var(--muted)} .tl-body{flex:1;padding-top:1px} .tl-t{font-weight:700;font-size:13.5px} .tl-s{font-size:12px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums} /* ── Modal de confirmação ────────────────────────────────────────────────── */ .modal-back{position:fixed;inset:0;z-index:80;background:rgba(14,10,28,.55);backdrop-filter:blur(3px); display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s} .modal-back.open{opacity:1;pointer-events:auto} .modal{width:100%;max-width:480px;background:var(--card);border-radius:24px 24px 0 0;padding:22px 20px calc(22px + var(--safe-b)); transform:translateY(40px);transition:transform .28s cubic-bezier(.16,1,.3,1);box-shadow:var(--sh-lg)} .modal-back.open .modal{transform:none} .modal .m-grab{width:38px;height:4px;border-radius:99px;background:var(--line-2);margin:0 auto 16px} .modal .m-t{font-size:18px;font-weight:800;letter-spacing:-.4px;margin:0 0 4px} .modal .m-s{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 16px} .modal .m-rows{background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin-bottom:16px} /* ── Vários ──────────────────────────────────────────────────────────────── */ .flash{display:none} .empty{text-align:center;padding:40px 18px} .empty .e-ico{width:60px;height:60px;margin:0 auto 14px;border-radius:18px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center} .empty .e-ico .icon{width:28px;height:28px;stroke:var(--purple-2)} :root[data-theme=dark] .empty .e-ico .icon{stroke:#c4b5fd} .empty .e-t{font-weight:750;color:var(--ink);margin-bottom:4px;font-size:15px} .empty .muted{font-size:13px} .note{display:flex;gap:10px;background:var(--info-bg);border:1px solid rgba(79,70,229,.16);border-radius:13px;padding:12px 14px;font-size:12.5px;color:var(--info-t);align-items:flex-start;margin-bottom:15px;line-height:1.45} .note .icon{width:17px;height:17px;flex:none;stroke:var(--info);margin-top:1px} .muted{color:var(--muted)}.center{text-align:center}.mb0{margin-bottom:0} .cost-line{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:14px;color:var(--ink-2)} .cost-line b{font-weight:800;color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums} .cost-line.total{border-top:1px dashed var(--line-2);margin-top:4px;padding-top:13px} .cost-line.total b{color:var(--purple-2);font-size:18px} .src-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 7px;border-radius:7px;background:var(--bg-2);color:var(--muted);flex:none} .src-tag.flow{background:var(--grad-soft);color:var(--purple-2)} :root[data-theme=dark] .src-tag.flow{color:#c4b5fd} /* Segmented de tema (Definições) */ .theme-seg{display:flex;background:var(--bg-2);border:1px solid var(--line-2);border-radius:13px;padding:4px;gap:3px} .theme-seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 4px;border:none; background:transparent;border-radius:10px;font-size:12.5px;font-weight:750;color:var(--muted);cursor:pointer;transition:all .18s} .theme-seg button .icon{width:15px;height:15px} .theme-seg button.active{background:var(--card);color:var(--purple-2);box-shadow:var(--sh-sm)} :root[data-theme=dark] .theme-seg button.active{color:#c4b5fd} /* ── Login ───────────────────────────────────────────────────────────────── */ .login-wrap{max-width:400px;margin:0 auto;padding:40px 24px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;position:relative} .login-orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:-1} .login-orb.a{width:340px;height:340px;background:#a855f7;top:-120px;right:-100px} .login-orb.b{width:280px;height:280px;background:#d946ef;bottom:-90px;left:-110px;opacity:.32} :root[data-theme=dark] .login-orb{opacity:.25} .login-logo{width:78px;height:78px;margin:0 auto 20px;background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:none} .login-logo img, .login-logo svg{width:100%;height:100%;object-fit:contain} .login-wrap h1{text-align:center;font-size:27px;font-weight:800;margin:0 0 4px;letter-spacing:-.7px} .login-wrap .tag{text-align:center;color:var(--muted);margin:0 0 26px;font-size:14px;line-height:1.5} .login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:22px 20px 20px} .login-feats{display:flex;justify-content:center;gap:7px;margin-top:20px;flex-wrap:wrap} .login-feats span{font-size:11px;font-weight:700;color:var(--muted);background:var(--card);border:1px solid var(--line-2);padding:6px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:5px} .login-feats .icon{width:12px;height:12px;stroke:var(--purple)} .login-wrap .alt{text-align:center;font-size:13px;color:var(--muted);margin-top:22px;line-height:1.7} .login-wrap .alt a{color:var(--purple-2);font-weight:700} :root[data-theme=dark] .login-wrap .alt a{color:#c4b5fd} .pw-wrap{position:relative} .pw-wrap .input{padding-right:48px} .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer; padding:8px;color:var(--muted);display:flex;align-items:center;justify-content:center} .pw-eye .icon{width:19px;height:19px} /* ── Banner PWA ──────────────────────────────────────────────────────────── */ .pwa-banner{position:fixed;bottom:calc(78px + var(--safe-b));left:50%;transform:translateX(-50%); width:calc(100% - 32px);max-width:448px;background:var(--card);border:1px solid var(--line-2); border-radius:var(--r);box-shadow:var(--sh-lg);padding:14px 16px;z-index:70; animation:slideUp .4s cubic-bezier(.16,1,.3,1)} @keyframes slideUp{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}} .pwa-banner-content{display:flex;align-items:center;gap:12px} .pwa-banner-icon{width:44px;height:44px;border-radius:12px;overflow:hidden;flex:none;box-shadow:var(--sh-sm)} .pwa-banner-icon img{width:100%;height:100%;object-fit:cover} .pwa-banner-text{flex:1;min-width:0} .pwa-banner-text h3{margin:0;font-size:14px;font-weight:750;color:var(--ink);letter-spacing:-.2px} .pwa-banner-text p{margin:2px 0 0;font-size:11.5px;color:var(--muted);line-height:1.35} .pwa-banner-actions{display:flex;flex-direction:column;gap:6px;flex:none} .pwa-banner-actions .btn{font-size:12.5px;padding:7px 14px;border-radius:10px} /* ── Estado de envio nos botões ──────────────────────────────────────────── */ .btn.loading{pointer-events:none;opacity:.8;position:relative;color:transparent} .btn.loading .icon{opacity:0} .btn.loading::after{content:"";position:absolute;width:20px;height:20px;left:50%;top:50%; margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;animation:spin .7s linear infinite} .btn.ghost.loading::after,.btn.soft.loading::after,.btn.danger.loading::after{ border-color:rgba(124,58,237,.25);border-top-color:var(--purple)} @keyframes spin{to{transform:rotate(360deg)}} /* ── Foco visível (teclado) ──────────────────────────────────────────────── */ a:focus-visible,button:focus-visible,.filter:focus-visible{ outline:2.5px solid var(--purple);outline-offset:2px;border-radius:10px} /* ── Desktop / tablet: app mais larga + dock flutuante ──────────────────── */ @media (min-width: 768px){ body{padding-bottom:calc(118px + var(--safe-b))} .app{max-width:640px} .topbar{border-radius:0 0 22px 22px;border:1px solid var(--glass-b);border-top:none; max-width:640px;margin:0 auto} .tabbar{left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:520px; bottom:18px;border-radius:24px;border:1px solid var(--line-2); padding:9px 10px 10px;box-shadow:var(--sh-lg)} .tabbar a.active::after{top:auto;bottom:-10px;border-radius:4px 4px 0 0} .fab{bottom:calc(108px + var(--safe-b))} .pwa-banner{display:none !important} .toast-zone{max-width:480px} .modal-back{align-items:center;padding:24px} .modal{border-radius:24px;max-width:440px} /* hover apenas onde há rato */ .card{transition:box-shadow .25s ease,transform .25s ease} a.card:hover,.appt:hover,.list-item:hover{background:linear-gradient(0deg,transparent,var(--card-2))} .quick:hover{transform:translateY(-2px);box-shadow:var(--sh)} .dcell:hover:not(.active){transform:translateY(-2px);border-color:var(--purple)} .btn:hover{filter:brightness(1.05)} .filter:hover:not(.active){border-color:var(--purple)} .tabbar a:hover{color:var(--purple-2)} .hist summary:hover .h-nm{color:var(--purple-2)} } @media (min-width: 1100px){ .app{max-width:720px} .topbar{max-width:720px} .hero .h-big{font-size:36px} } /* Acessibilidade: respeitar redução de movimento */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ═══════════════════════════════════════════════════════════════ SUPORTE — Flow support module styles ═══════════════════════════════════════════════════════════════ */ /* quick-grid 5 cols */ .quick-grid-5{grid-template-columns:repeat(5,1fr)} .quick-help .q-badge{ position:absolute;top:-4px;right:-4px; min-width:16px;height:16px;padding:0 4px; background:var(--red,#e53e3e);color:#fff; font-size:9px;font-weight:700;line-height:16px; border-radius:8px;border:2px solid var(--bg); pointer-events:none } .quick{position:relative} /* tab badge (dot) on tabbar */ .fl-tab-badge{ position:absolute;top:4px;right:calc(50% - 14px); width:8px;height:8px; background:var(--red,#e53e3e); border-radius:50%;border:2px solid var(--bg) } /* inline badge next to view title */ .fl-badge-inline{ display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:18px;padding:0 5px; background:var(--red,#e53e3e);color:#fff; font-size:10px;font-weight:700; border-radius:9px;vertical-align:middle;margin-left:6px } /* back link */ .fl-back{ display:inline-flex;align-items:center;gap:6px; color:var(--purple-2);font-size:13px;font-weight:600; margin-bottom:14px;text-decoration:none } .fl-chevron-back{width:16px;height:16px} /* sub-nav / segmented */ .seg{ display:flex;gap:6px; background:var(--card-2); border-radius:12px;padding:4px } .seg a{ flex:1;display:flex;align-items:center;justify-content:center;gap:6px; padding:8px 10px;border-radius:9px; font-size:13px;font-weight:600;color:var(--txt-2); text-decoration:none;transition:background .2s,color .2s } .seg a.active{background:var(--card);color:var(--purple-2);box-shadow:var(--sh)} .seg a svg{width:15px;height:15px} /* ticket row */ .fl-ticket{ display:block;padding:14px 16px; background:var(--card);border-radius:16px; border:1px solid var(--line-2); margin-bottom:10px;text-decoration:none;color:var(--txt); transition:box-shadow .2s } .fl-ticket-unread{ border-left:3px solid var(--purple-2); background:linear-gradient(135deg,var(--card),var(--card-2)) } .fl-t-head{ display:flex;align-items:center;gap:8px; margin-bottom:4px;flex-wrap:wrap } .fl-t-num{font-size:11px;font-weight:700;color:var(--txt-2);font-family:monospace} .fl-t-time{font-size:11px;color:var(--txt-3);margin-left:auto} .fl-t-subj{font-size:14px;font-weight:600;line-height:1.3;margin-bottom:3px} .fl-t-preview{font-size:12px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fl-t-new{ display:inline-block;margin-top:6px; font-size:10px;font-weight:700; background:var(--purple-2);color:#fff; padding:2px 8px;border-radius:6px } /* status badges */ .fl-stat-badge{ font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap } .fl-stat-aberto {background:#ebf8ff;color:#2b6cb0} .fl-stat-atendimento{background:#f3e8ff;color:#6b21a8} .fl-stat-aguardando {background:#fff7ed;color:#c05621} .fl-stat-resolvido {background:#f0fff4;color:#276749} .fl-stat-fechado {background:var(--card-2);color:var(--txt-2)} /* chat bubbles */ .fl-chat{ display:flex;flex-direction:column;gap:10px; padding:4px 0 8px } .fl-chat-empty{text-align:center;color:var(--txt-2);font-size:13px;padding:20px 0} .fl-bwrap{display:flex} .fl-bwrap-client{justify-content:flex-end} .fl-bwrap-admin {justify-content:flex-start} .fl-bubble{ max-width:82%;padding:10px 14px; border-radius:14px;font-size:13px;line-height:1.55 } .fl-b-client{ background:linear-gradient(135deg,var(--purple),var(--purple-2)); color:#fff;border-bottom-right-radius:4px } .fl-b-admin{ background:var(--card-2); color:var(--txt);border-bottom-left-radius:4px; border:1px solid var(--line-2) } .fl-bname{font-size:10px;font-weight:700;margin-bottom:4px;opacity:.75} .fl-bname span{font-weight:400;opacity:.7;margin-left:4px} /* view padding/header */ .view-title{font-size:18px;font-weight:800;margin-bottom:2px} .view-sub{font-size:13px;color:var(--txt-2);margin-bottom:16px} /* new ticket form */ .pad{padding:16px} @media (max-width:360px){ .quick-grid-5{grid-template-columns:repeat(5,1fr);font-size:9px} .quick-grid-5 .quick .q-ic{font-size:18px} }