/* ============================================================ LuminAgent — design.css (Foundation / Φάση 1α) ΠΡΟΣΘΕΤΙΚΟ & ΑΣΦΑΛΕΣ: ορίζει ΜΟΝΟ νέα tokens + opt-in .lum-* classes. Δεν πειράζει κανένα υπάρχον token (--ink/--mut/--line/--bg/--card) ή class. Υιοθετείται σταδιακά, section-by-section, στις επόμενες φάσεις. Canonical tokens από το εγκεκριμένο blueprint (MASTER-REFERENCE). ============================================================ */ :root{ /* brand */ --mint:#2DE3A8; --mint-deep:#13B98A; --blue:#1E429F; --blue-bright:#2F6BFF; --warn:#FFB454; --bad:#FF6B7D; /* agent hues (orbs) */ --agent-booking-1:#4F8DFF; --agent-booking-2:#2DE3A8; --agent-studio-1:#A78BFA; --agent-studio-2:#F472B6; --agent-reviews-1:#FBBF24; --agent-reviews-2:#FB923C; --agent-ai-1:#34D399; --agent-ai-2:#22D3EE; /* radius / blur */ --r:18px; --r-sm:12px; --r-lg:24px; --blur:saturate(150%) blur(22px); /* spacing scale 4/8/12/16/24/32 */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; /* typography (fonts ήδη φορτωμένα στο ) */ --f-display:'Space Grotesk', var(--font-display, system-ui), sans-serif; --f-body:'Manrope', var(--font-body, system-ui), sans-serif; /* LIGHT (default) theme tokens */ --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.92); --stroke:rgba(16,37,82,.10); --stroke-2:rgba(16,37,82,.17); --ink-2:#4D5E82; --ink-3:#8492B0; --accent:#0FA37A; --active-ink:#0A1F44; --shadow:0 20px 50px -22px rgba(20,42,92,.30); --shadow-soft:0 10px 30px -16px rgba(20,42,92,.20); --glow-a:rgba(45,227,168,.14); --glow-b:rgba(47,107,255,.12); /* γέφυρες για components που περιμένουν αυτά τα ονόματα (π.χ. orbs) */ --muted:var(--ink-3); --text:var(--ink, #0E2552); --card2:var(--card, #fff); } [data-theme="dark"]{ --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.075); --stroke:rgba(255,255,255,.09); --stroke-2:rgba(255,255,255,.15); --ink-2:#A8B6D9; --ink-3:#6E7EA8; --accent:#2DE3A8; --active-ink:#FFFFFF; --shadow:0 18px 50px -20px rgba(0,0,0,.65); --shadow-soft:0 8px 30px -16px rgba(0,0,0,.55); --glow-a:rgba(45,227,168,.13); --glow-b:rgba(47,107,255,.14); --muted:var(--ink-3); --text:var(--ink); --card2:var(--card); } /* ---- Opt-in component layer (.lum-*) — δεν συγκρούεται με τίποτα ---- */ .lum-glass{ background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--stroke); border-radius:var(--r); box-shadow:var(--shadow-soft); } .lum-display{font-family:var(--f-display);letter-spacing:-.02em;} .lum-num{font-family:var(--f-display);font-variant-numeric:tabular-nums;} .lum-mono{font-family:var(--f-display);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);} /* buttons: primary / ghost / danger */ .lum-btn{font-family:var(--f-body);font-weight:700;font-size:13.5px;line-height:1;border-radius:var(--r-sm);padding:10px 18px;cursor:pointer;border:1px solid transparent;transition:transform .12s ease,box-shadow .12s ease,background .15s ease;} .lum-btn:hover{transform:translateY(-1px);} .lum-btn:active{transform:translateY(0);} .lum-btn-primary{background:linear-gradient(135deg,var(--blue-bright),var(--mint-deep));color:#fff;box-shadow:0 10px 24px -12px var(--mint);} .lum-btn-ghost{background:transparent;border-color:var(--stroke-2);color:var(--text);} .lum-btn-danger{background:transparent;border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad);} /* inputs */ .lum-input{font-family:var(--f-body);font-size:14px;padding:10px 14px;border-radius:var(--r-sm);border:1px solid var(--stroke-2);background:var(--glass-2);color:var(--text);} .lum-input:focus{outline:none;border-color:var(--mint-deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 25%,transparent);} /* badges: ok / warn / bad */ .lum-badge{font-family:var(--f-display);font-size:11px;font-weight:600;padding:4px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;} .lum-badge-ok{color:var(--mint-deep);background:color-mix(in srgb,var(--mint) 15%,transparent);} .lum-badge-warn{color:#B4700E;background:color-mix(in srgb,var(--warn) 22%,transparent);} .lum-badge-bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,transparent);} /* brand icon container (theme-aware chip) */ .lum-brandico{display:grid;place-items:center;border-radius:var(--r-sm);} .lum-brandico svg{display:block;} /* integrations: ουδέτερο chip πίσω από τα έγχρωμα brand logos */ .int-ic.int-ic-brand{background:color-mix(in srgb, var(--ink,#0E2552) 6%, transparent);} [data-theme="dark"] .int-ic.int-ic-brand{background:rgba(255,255,255,.08);} .int-ic-brand svg{width:20px;height:20px;} @media (prefers-reduced-motion:reduce){ .lum-btn{transition:none;} } /* ===== Settings Hub (#6) ===== */ .shub{margin-bottom:22px;} .shub-zone{margin-bottom:16px;} .shub-ztitle{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8492B0;margin:0 0 10px;} .shub-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;} .shub-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1px solid rgba(16,37,82,.10);background-color:#fff;cursor:pointer;text-align:left;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;} .shub-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(20,42,92,.30);border-color:rgba(45,227,168,.45);} .shub-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background-color:rgba(16,37,82,.05);color:#0FA37A;flex:0 0 auto;} .shub-ic svg{width:19px;height:19px;} .shub-l{font-weight:600;font-size:14px;color:#0E2552;display:block;} .shub-d{font-size:12px;color:#8492B0;display:block;margin-top:1px;} [data-theme="dark"] .shub-card{background-color:#111A2E;border-color:rgba(255,255,255,.09);} [data-theme="dark"] .shub-card:hover{border-color:rgba(45,227,168,.4);} [data-theme="dark"] .shub-ic{background-color:rgba(255,255,255,.06);color:#2DE3A8;} [data-theme="dark"] .shub-l{color:#E7ECF5;} [data-theme="dark"] .shub-ztitle,[data-theme="dark"] .shub-d{color:#7E8DA8;} /* ===== Widget & Φόρμα tabs (#6c) ===== */ .wf-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid rgba(16,37,82,.10);margin-bottom:18px;} .wf-tab{background:transparent;border:0;border-bottom:2px solid transparent;color:#8492B0;font-weight:600;font-size:14px;padding:10px 14px;cursor:pointer;font-family:inherit;transition:color .15s ease,border-color .15s ease;} .wf-tab:hover{color:#0E2552;} .wf-tab.on{color:#0E2552;border-bottom-color:#13B98A;} [data-theme="dark"] .wf-tabs{border-color:rgba(255,255,255,.09);} [data-theme="dark"] .wf-tab{color:#7E8DA8;} [data-theme="dark"] .wf-tab:hover{color:#E7ECF5;} [data-theme="dark"] .wf-tab.on{color:#E7ECF5;border-bottom-color:#2DE3A8;} /* ===== Agent Hub (#7) ===== */ .main-wrap.hub-on #hubRow{display:grid;grid-template-columns:224px minmax(0,1fr);gap:16px;align-items:start;} @media(max-width:760px){.main-wrap.hub-on #hubRow{grid-template-columns:1fr;}} .ahub-banner{position:relative;border-radius:22px;padding:24px 26px 22px;overflow:hidden;margin-bottom:18px;display:flex;align-items:center;gap:24px;background:linear-gradient(135deg,#070C1A 0%,#0C1834 60%,#0A1F44 100%);color:#fff;border:1px solid rgba(120,160,255,.16);box-shadow:0 22px 56px -26px rgba(20,60,160,.55),inset 0 0 60px rgba(47,107,255,.07);} .ahub-gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(120,160,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.06) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:radial-gradient(440px 240px at 84% 12%,#000,transparent 78%);mask-image:radial-gradient(440px 240px at 84% 12%,#000,transparent 78%);} .ahub-back{position:absolute;top:14px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#cfe0ff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;} .ahub-back:hover{background:rgba(255,255,255,.14);} .ahub-back svg{width:14px;height:14px;} .ahub-core-wrap{position:relative;width:104px;height:104px;flex:0 0 auto;z-index:2;animation:ahubFloat 6s ease-in-out infinite;} .ahub-glow{position:absolute;inset:-14px;border-radius:50%;filter:blur(8px);animation:ahubBreathe 4s ease-in-out infinite;} .ahub-core{position:absolute;inset:20px;border-radius:50%;} .ahub-ring{position:absolute;border-radius:50%;border:1px solid transparent;} .ahub-ring.r1{inset:6px;animation:ahubSpin 6s linear infinite;} .ahub-ring.r2{inset:0;border-style:dashed;opacity:.55;animation:ahubSpin 9s linear infinite reverse;} .ahub-orbit{position:absolute;inset:0;animation:ahubSpin 7s linear infinite;} .ahub-orbit.o2{animation-duration:11s;animation-direction:reverse;} .ahub-orbit i{position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;} .ahub-orbit i:nth-child(1){transform:rotate(0deg) translateX(52px);} .ahub-orbit i:nth-child(2){transform:rotate(130deg) translateX(52px);} .ahub-orbit i:nth-child(3){transform:rotate(245deg) translateX(52px);} .ahub-orbit.o2 i{width:5px;height:5px;margin:-2.5px;} .ahub-orbit.o2 i:nth-child(1){transform:rotate(60deg) translateX(44px);} .ahub-orbit.o2 i:nth-child(2){transform:rotate(200deg) translateX(44px);} .ahub-ic{position:absolute;inset:20px;display:flex;align-items:center;justify-content:center;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));z-index:1;} .ahub-ic svg{width:36px;height:36px;} .ahub-info{position:relative;z-index:2;} .ahub-eyebrow{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7FE6C4;} .ahub-name{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;margin:5px 0;color:#fff;} .ahub-sub{color:rgba(220,232,255,.72);font-size:13.5px;max-width:440px;} .ahub-chips{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;} .ahub-chip{font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.05em;padding:5px 10px;border-radius:999px;border:1px solid rgba(120,160,255,.26);background:rgba(120,160,255,.09);color:#cfe0ff;display:inline-flex;align-items:center;gap:6px;} .ahub-chip .d{width:6px;height:6px;border-radius:50%;background:#2DE3A8;box-shadow:0 0 8px #2DE3A8;animation:ahubPulse 2s infinite;} #agentHubTabs{display:flex;flex-direction:column;gap:3px;background-color:#fff;border:1px solid rgba(16,37,82,.10);border-radius:16px;padding:8px;height:fit-content;box-shadow:0 12px 30px -20px rgba(20,42,92,.3);position:sticky;top:12px;} .ahub-vhead{font-family:'Space Grotesk',sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#8492B0;padding:6px 10px 8px;} .ahub-vtab{display:flex;align-items:center;gap:11px;background:transparent;border:0;border-radius:12px;color:#4D5E82;font-family:inherit;font-weight:600;font-size:13.5px;padding:11px 12px;cursor:pointer;text-align:left;transition:background .15s ease,color .15s ease;} .ahub-vtab:hover{background:rgba(14,37,82,.05);color:#0E2552;} .ahub-vtab.on{background:rgba(79,141,255,.13);color:#0E2552;box-shadow:inset 0 0 0 1px rgba(79,141,255,.28);} .ahub-vtab svg{width:18px;height:18px;color:#8492B0;flex:0 0 auto;} .ahub-vtab.on svg{color:#2F6BFF;} [data-theme="dark"] #agentHubTabs{background-color:#111A2E;border-color:rgba(255,255,255,.09);} [data-theme="dark"] .ahub-vhead{color:#7E8DA8;} [data-theme="dark"] .ahub-vtab{color:#A8B6D9;} [data-theme="dark"] .ahub-vtab:hover{background:rgba(255,255,255,.05);color:#EEF3FF;} [data-theme="dark"] .ahub-vtab.on{background:rgba(79,141,255,.16);color:#EEF3FF;} [data-theme="dark"] .ahub-vtab.on svg{color:#5B9BFF;} @keyframes ahubFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}} @keyframes ahubSpin{to{transform:rotate(360deg);}} @keyframes ahubBreathe{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:.85;transform:scale(1.05);}} @keyframes ahubPulse{0%,100%{opacity:.6;}50%{opacity:1;}} @media(prefers-reduced-motion:reduce){.ahub-core-wrap,.ahub-orbit,.ahub-ring,.ahub-glow,.ahub-chip .d{animation:none;}} /* Agent hub — χωρίς κάθετη μπάρα (Studio: κρατά τα δικά του tabs) */ .main-wrap.hub-on.hub-norail #hubRow{display:block;} /* ===== Home launcher: Κοινά pills + Overview link ===== */ .hm-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px;} .hm-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid rgba(16,37,82,.10);background-color:#fff;font-weight:600;font-size:13.5px;color:#4D5E82;cursor:pointer;font-family:inherit;transition:transform .15s ease,color .15s ease,border-color .15s ease;} .hm-pill:hover{transform:translateY(-2px);color:#0E2552;border-color:rgba(45,227,168,.4);} .hm-pill svg{width:16px;height:16px;color:#13B98A;} .hm-seeov{background:transparent;border:0;color:#0FA37A;font-weight:700;font-family:inherit;font-size:inherit;cursor:pointer;padding:0;margin-left:2px;} .hm-seeov:hover{text-decoration:underline;} [data-theme="dark"] .hm-pill{background-color:#111A2E;border-color:rgba(255,255,255,.09);color:#A8B6D9;} [data-theme="dark"] .hm-pill:hover{color:#EEF3FF;} [data-theme="dark"] .hm-pill svg{color:#2DE3A8;} [data-theme="dark"] .hm-seeov{color:#2DE3A8;} /* ===== Top bar redesign (search / actions / avatar) ===== */ .page-head-in{gap:12px;} .tb-search{position:relative;flex:1;max-width:440px;margin-left:6px;} .tb-search input{width:100%;border:1px solid rgba(16,37,82,.12);background-color:rgba(16,37,82,.03);border-radius:10px;padding:9px 12px 9px 34px;font-size:13.5px;font-family:inherit;color:#0E2552;outline:none;transition:border-color .15s,background-color .15s;} .tb-search input:focus{border-color:rgba(45,227,168,.5);background-color:#fff;} .tb-search input::placeholder{color:#8492B0;} .tb-sic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#8492B0;pointer-events:none;display:inline-flex;} .tb-sic svg{width:16px;height:16px;} .tb-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background-color:#fff;border:1px solid rgba(16,37,82,.12);border-radius:12px;box-shadow:0 18px 40px -18px rgba(20,42,92,.4);padding:6px;z-index:30;display:none;max-height:340px;overflow:auto;} .tb-res{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;border-radius:8px;padding:9px 10px;cursor:pointer;font-family:inherit;font-size:13.5px;color:#0E2552;text-align:left;} .tb-res:hover{background:rgba(14,37,82,.05);} .tb-res svg{width:16px;height:16px;color:#0FA37A;flex:0 0 auto;} .tb-nores{padding:12px;color:#8492B0;font-size:13px;text-align:center;} .tb-right{margin-left:auto;display:flex;align-items:center;gap:8px;} .tb-icon{position:relative;border:1px solid rgba(16,37,82,.12);background-color:#fff;border-radius:10px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#4D5E82;} .tb-icon:hover{color:#0E2552;border-color:rgba(45,227,168,.4);} .tb-icon svg{width:18px;height:18px;} .tb-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#F43F5E;color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;} .tb-avatar{width:38px;height:38px;border-radius:50%;border:0;background:linear-gradient(135deg,#4F8DFF,#2DE3A8);color:#fff;font-weight:700;font-size:13px;font-family:'Space Grotesk',sans-serif;cursor:pointer;letter-spacing:.02em;display:inline-flex;align-items:center;justify-content:center;} .tb-avatar:hover{filter:brightness(1.06);} .theme-toggle{margin-left:0!important;} @media(max-width:640px){.tb-search{display:none;}} [data-theme="dark"] .tb-search input{background-color:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#EEF3FF;} [data-theme="dark"] .tb-search input:focus{background-color:rgba(255,255,255,.08);} [data-theme="dark"] .tb-sic,[data-theme="dark"] .tb-search input::placeholder{color:#7E8DA8;} [data-theme="dark"] .tb-results{background-color:#111A2E;border-color:rgba(255,255,255,.1);} [data-theme="dark"] .tb-res{color:#E7ECF5;} [data-theme="dark"] .tb-res:hover{background:rgba(255,255,255,.06);} [data-theme="dark"] .tb-icon{background-color:#111A2E;border-color:rgba(255,255,255,.1);color:#A8B6D9;} [data-theme="dark"] .tb-icon:hover{color:#fff;} /* ===== Αρχική: compact KPIs + prominent Κοινά ===== */ .hm-kpis{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 22px;} .hm-kpi{flex:1;min-width:120px;background-color:var(--card,#fff);border:1px solid var(--stroke,#E6E9EF);border-radius:14px;padding:12px 15px;} .hm-kpi b{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;display:block;color:var(--text,#0E2552);line-height:1.1;} .hm-kpi span{font-size:12px;color:var(--muted,#8492B0);} .hm-common{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;} .hm-cm{display:flex;align-items:center;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--stroke,#E6E9EF);background-color:var(--card,#fff);cursor:pointer;font-family:inherit;text-align:left;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;} .hm-cm:hover{transform:translateY(-3px);box-shadow:0 16px 32px -18px rgba(20,42,92,.32);border-color:rgba(45,227,168,.45);} .hm-cm b{font-size:14.5px;color:var(--text,#0E2552);font-weight:600;} .hm-cm-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(79,141,255,.16),rgba(45,227,168,.16));color:#0FA37A;flex:0 0 auto;} .hm-cm-ic svg{width:21px;height:21px;} [data-theme="dark"] .hm-cm-ic{background:linear-gradient(135deg,rgba(79,141,255,.22),rgba(45,227,168,.22));color:#2DE3A8;} /* ===== Top bar: lang toggle + Google-Cloud-style search ===== */ .tb-lang{border:1px solid rgba(16,37,82,.12);background-color:#fff;border-radius:10px;height:38px;min-width:40px;padding:0 11px;cursor:pointer;color:#4D5E82;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.06em;} .tb-lang:hover{color:#0E2552;border-color:rgba(45,227,168,.4);} [data-theme="dark"] .tb-lang{background-color:#111A2E;border-color:rgba(255,255,255,.1);color:#A8B6D9;} [data-theme="dark"] .tb-lang:hover{color:#fff;} .tb-grouphd{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8492B0;padding:8px 10px 6px;} .tb-res{position:relative;} .tb-res-ic{display:inline-flex;flex:0 0 auto;} .tb-res-l{flex:1;} .tb-res-k{opacity:0;font-family:'Space Grotesk',sans-serif;font-size:12px;color:#8492B0;border:1px solid rgba(16,37,82,.14);border-radius:5px;padding:0 5px;line-height:16px;} .tb-res.on{background:rgba(45,227,168,.12);} .tb-res.on .tb-res-k{opacity:1;} [data-theme="dark"] .tb-grouphd{color:#7E8DA8;} [data-theme="dark"] .tb-res.on{background:rgba(45,227,168,.15);} [data-theme="dark"] .tb-res-k{color:#7E8DA8;border-color:rgba(255,255,255,.14);} /* Search results: title + description (Google-Cloud style) */ .tb-res{padding:10px 12px;align-items:center;} .tb-res-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(16,37,82,.05);color:#0FA37A;flex:0 0 auto;} .tb-res-ic svg{width:18px;height:18px;} .tb-res-txt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;} .tb-res-l{flex:none;font-weight:600;color:#1A56DB;font-size:14px;line-height:1.2;} .tb-res-d{font-size:12px;color:#8492B0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .tb-results{max-height:420px;padding:6px 6px 8px;} [data-theme="dark"] .tb-res-l{color:#8AB4FF;} [data-theme="dark"] .tb-res-d{color:#7E8DA8;} [data-theme="dark"] .tb-res-ic{background:rgba(255,255,255,.06);color:#2DE3A8;} /* ===== Settings hub: business profile form ===== */ .shub-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:4px;} .shub-form-full{grid-column:1/-1;} .shub-form label{display:block;font-size:12.5px;font-weight:600;color:#8492B0;margin-bottom:5px;} .shub-form input{width:100%;} [data-theme="dark"] .shub-form label{color:#7E8DA8;} @media(max-width:560px){.shub-form{grid-template-columns:1fr;}} /* ===== Connection status (Settings) ===== */ .conn-status{margin-bottom:14px;} .conn-hd{font-size:12.5px;color:#8492B0;margin-bottom:8px;} .conn-hd b{color:#0FA37A;font-family:'Space Grotesk',sans-serif;} .conn-chips{display:flex;gap:8px;flex-wrap:wrap;} .conn-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid rgba(16,37,82,.12);background-color:#fff;font-size:13px;font-weight:600;color:#4D5E82;cursor:pointer;font-family:inherit;} .conn-chip:hover{border-color:rgba(45,227,168,.4);} .conn-dot{width:8px;height:8px;border-radius:50%;background:#CBD5E1;flex:0 0 auto;} .conn-chip.on .conn-dot{background:#10B981;box-shadow:0 0 7px rgba(16,185,129,.6);} .conn-mark{font-weight:700;color:#94A3B8;} .conn-chip.on .conn-mark{color:#10B981;} [data-theme="dark"] .conn-chip{background-color:#111A2E;border-color:rgba(255,255,255,.1);color:#A8B6D9;} [data-theme="dark"] .conn-dot{background:#334155;} /* ===== Hub connection strip (on dark banner) ===== */ .ahub-connstrip{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:16px;padding:11px 13px;border-radius:13px;background:rgba(120,160,255,.14);border:1px solid rgba(120,160,255,.28);color:#e9f0ff;font-size:13px;position:relative;z-index:2;} .ahub-cs-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#8fb4ff;flex:0 0 auto;} .ahub-cs-ic svg{width:16px;height:16px;} .ahub-cs-t{flex:1;line-height:1.35;min-width:140px;} .ahub-cs-t b{color:#fff;font-weight:600;} .ahub-cs-btn{margin-left:auto;background:#fff;color:#0A1F44;border:0;border-radius:999px;padding:7px 15px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform .15s ease,filter .15s ease;} .ahub-cs-btn:hover{filter:brightness(1.05);transform:translateY(-1px);} /* ===== Sidebar footer: account + logout ===== */ .side-acct{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;border-radius:12px;padding:8px 9px;cursor:pointer;text-align:left;transition:background .15s ease;} .side-acct:hover{background:rgba(14,37,82,.06);} .side-acct-av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(135deg,#4F8DFF,#2DE3A8);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;} .side-acct-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25;} .side-acct-txt b{font-size:13px;color:#0E2552;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px;} .side-acct-txt span{font-size:11px;color:#8492B0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px;} .side-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;background:transparent;border:1px solid rgba(16,37,82,.12);border-radius:10px;padding:9px;cursor:pointer;color:#64748B;font-family:inherit;font-weight:600;font-size:13px;transition:background .15s ease,color .15s ease,border-color .15s ease;} .side-logout:hover{background:rgba(244,63,94,.08);color:#E11D48;border-color:rgba(244,63,94,.3);} .side-logout svg{width:16px;height:16px;} [data-theme="dark"] .side-acct:hover{background:rgba(255,255,255,.06);} [data-theme="dark"] .side-acct-txt b{color:#EEF3FF;} [data-theme="dark"] .side-logout{border-color:rgba(255,255,255,.12);color:#94A3B8;} [data-theme="dark"] .side-logout:hover{background:rgba(244,63,94,.12);color:#FB7185;border-color:rgba(244,63,94,.4);} /* ===== Orb loading spinner ===== */ .loading{color:#8492B0;min-height:80px;display:flex;align-items:center;justify-content:center;gap:10px;} .loading::before{content:'';display:inline-block;width:26px;height:26px;border-radius:50%;border:3px solid rgba(79,141,255,.18);border-top-color:#2DE3A8;border-right-color:#4F8DFF;box-shadow:0 0 13px -2px rgba(45,227,168,.55);animation:orbSpin .7s linear infinite;flex:0 0 auto;vertical-align:middle;} @keyframes orbSpin{to{transform:rotate(360deg);}} [data-theme="dark"] .loading{color:#7E8DA8;} [data-theme="dark"] .loading::before{border-color:rgba(79,141,255,.22);border-top-color:#2DE3A8;border-right-color:#5B9BFF;} /* ===== Onboarding checklist (Αρχική) ===== */ .hm-setup{background-color:#fff;border:1px solid rgba(45,227,168,.35);border-radius:18px;padding:18px 20px;margin-bottom:22px;box-shadow:0 14px 32px -24px rgba(20,42,92,.35);} .hm-setup-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;} .hm-setup-hd b{font-family:'Space Grotesk',sans-serif;font-size:15.5px;color:#0E2552;display:block;} .hm-setup-hd span{font-size:12.5px;color:#8492B0;} .hm-setup-x{background:transparent;border:0;color:#B6C2D9;font-size:15px;cursor:pointer;line-height:1;padding:2px 4px;font-family:inherit;} .hm-setup-x:hover{color:#64748B;} .hm-bar{height:6px;border-radius:999px;background:rgba(16,37,82,.08);overflow:hidden;margin-bottom:14px;} .hm-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4F8DFF,#2DE3A8);transition:width .5s ease;} .hm-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;} .hm-step{display:flex;align-items:center;gap:11px;background:transparent;border:1px solid rgba(16,37,82,.09);border-radius:12px;padding:11px 12px;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s,background .15s;} .hm-step:hover{border-color:rgba(45,227,168,.5);background:rgba(45,227,168,.04);} .hm-step.done{cursor:default;opacity:.62;} .hm-step.done:hover{border-color:rgba(16,37,82,.09);background:transparent;} .hm-step-ic{width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;border:2px solid rgba(16,37,82,.16);color:#fff;font-size:12px;font-weight:700;} .hm-step.done .hm-step-ic{background:#10B981;border-color:#10B981;} .hm-step-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;} .hm-step-t b{font-size:13.5px;color:#0E2552;font-weight:600;} .hm-step.done .hm-step-t b{text-decoration:line-through;} .hm-step-t span{font-size:11.5px;color:#8492B0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .hm-step-go{color:#B6C2D9;font-size:18px;} [data-theme="dark"] .hm-setup{background-color:#111A2E;border-color:rgba(45,227,168,.28);} [data-theme="dark"] .hm-setup-hd b,[data-theme="dark"] .hm-step-t b{color:#EEF3FF;} [data-theme="dark"] .hm-step{border-color:rgba(255,255,255,.09);} [data-theme="dark"] .hm-bar{background:rgba(255,255,255,.08);} /* ===== Παραδοσιμότητα email (Ρυθμίσεις) ===== */ .mailh{margin:14px 0 4px;} .mailh-load{font-size:13px;color:#8492B0;} .mailh-hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px;} .mailh-hd b{font-size:14px;color:#0E2552;} .mailh-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;} .mailh-dot.ok{background:#10B981;box-shadow:0 0 8px rgba(16,185,129,.6);} .mailh-dot.warn{background:#F59E0B;box-shadow:0 0 8px rgba(245,158,11,.6);} .mailh-dot.bad{background:#EF4444;box-shadow:0 0 8px rgba(239,68,68,.6);} .mailh-sub{font-size:12.5px;color:#8492B0;} .mailh-from{font-size:12.5px;color:#8492B0;margin-bottom:8px;} .mailh-from b{color:#0E2552;font-weight:600;} .mailh-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid rgba(16,37,82,.12);background-color:#fff;font-size:12.5px;font-weight:600;color:#4D5E82;} .mailh-chip.on .conn-dot{background:#10B981;box-shadow:0 0 7px rgba(16,185,129,.6);} .mailh-chip.on .conn-mark{color:#10B981;} .mailh-stat{font-size:12px;color:#8492B0;align-self:center;} .mailh-issue{border-radius:10px;padding:9px 12px;margin-bottom:7px;font-size:12.5px;line-height:1.45;} .mailh-issue b{display:block;font-size:13px;margin-bottom:2px;} .mailh-issue.bad{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.22);color:#991B1B;} .mailh-issue.warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);color:#92400E;} [data-theme="dark"] .mailh-hd b,[data-theme="dark"] .mailh-from b{color:#EEF3FF;} [data-theme="dark"] .mailh-chip{background-color:#111A2E;border-color:rgba(255,255,255,.1);color:#A8B6D9;} [data-theme="dark"] .mailh-issue.bad{color:#FCA5A5;} [data-theme="dark"] .mailh-issue.warn{color:#FCD34D;} /* ===== Μετρικές agent στο banner ===== */ .ahub-kpis{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2;} .ahub-kpi{min-width:92px;padding:10px 14px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(120,160,255,.2);text-align:right;} .ahub-kpi b{display:block;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:#fff;line-height:1.1;} .ahub-kpi span{font-size:10.5px;color:rgba(210,225,255,.7);} .ahub-kpi.alert{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.12);} .ahub-kpi.alert b{color:#FDE68A;} @media(max-width:900px){.ahub-kpis{margin-left:0;width:100%;}.ahub-kpi{flex:1;min-width:78px;text-align:left;}} /* ===== Πλάνο & χρήση (sidebar + λογαριασμός) ===== */ .planbox{margin-bottom:10px;} .pb{border:1px solid rgba(16,37,82,.10);border-radius:13px;padding:11px 12px;background-color:rgba(16,37,82,.025);} .pb.warn{border-color:rgba(245,158,11,.35);background-color:rgba(245,158,11,.06);} .pb.over{border-color:rgba(239,68,68,.35);background-color:rgba(239,68,68,.06);} .pb-hd{display:flex;align-items:center;gap:7px;margin-bottom:8px;flex-wrap:wrap;} .pb-hd b{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.1em;color:#0E2552;} .pb-trial{font-size:10.5px;color:#0FA37A;background:rgba(45,227,168,.14);border-radius:999px;padding:2px 8px;font-weight:600;} .pb-up{margin-left:auto;background:transparent;border:0;color:#2F6BFF;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:0;} .pb-up:hover{text-decoration:underline;} .pb-row{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:#8492B0;margin-bottom:5px;} .pb-row b{color:#0E2552;font-size:12px;font-family:'Space Grotesk',sans-serif;} .pb-bar{height:5px;border-radius:999px;background:rgba(16,37,82,.09);overflow:hidden;} .pb-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4F8DFF,#2DE3A8);transition:width .5s ease;} .pb-bar.warn i{background:linear-gradient(90deg,#FBBF24,#FB923C);} .pb-bar.over i{background:linear-gradient(90deg,#FB7185,#EF4444);} .pb-credits{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:11.5px;color:#4D5E82;cursor:pointer;} .pb-credits svg{width:13px;height:13px;color:#8492B0;} .pb-credits:hover{color:#0E2552;} .pb-credits.low{color:#B45309;font-weight:600;} .pb-credits.low svg{color:#F59E0B;} .pb-cta{margin-top:9px;font-size:11.5px;font-weight:700;color:#B45309;cursor:pointer;} .pb-cta.urgent{color:#DC2626;} .pb-cta:hover{text-decoration:underline;} [data-theme="dark"] .pb{background-color:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);} [data-theme="dark"] .pb-hd b,[data-theme="dark"] .pb-row b{color:#EEF3FF;} [data-theme="dark"] .pb-bar{background:rgba(255,255,255,.1);} [data-theme="dark"] .pb-up{color:#5B9BFF;} /* ===== Μενού λογαριασμού (top bar) ===== */ .tb-acct-wrap{position:relative;} .tb-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:236px;background-color:#fff;border:1px solid rgba(16,37,82,.12);border-radius:14px;box-shadow:0 20px 44px -20px rgba(20,42,92,.4);padding:8px;z-index:60;display:none;} .tb-menu.open{display:block;} .tbm-head{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;} .tbm-av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(135deg,#4F8DFF,#2DE3A8);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;} .tbm-id{min-width:0;display:flex;flex-direction:column;line-height:1.3;} .tbm-id b{font-size:13.5px;color:#0E2552;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;} .tbm-id span{font-size:11.5px;color:#8492B0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;} .tbm-tags{display:flex;gap:6px;padding:0 8px 8px;} .tbm-tag{font-family:'Space Grotesk',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:3px 9px;border-radius:999px;background:rgba(45,227,168,.16);color:#0FA37A;} .tbm-tag.ghost{background:rgba(16,37,82,.06);color:#8492B0;} .tbm-sep{height:1px;background:rgba(16,37,82,.08);margin:4px 0;} .tbm-item{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;border-radius:9px;padding:9px 10px;font-family:inherit;font-size:13.5px;font-weight:500;color:#0E2552;cursor:pointer;text-align:left;} .tbm-item:hover{background:rgba(14,37,82,.05);} .tbm-item svg{width:16px;height:16px;color:#8492B0;flex:0 0 auto;} .tbm-item.danger{color:#E11D48;} .tbm-item.danger:hover{background:rgba(244,63,94,.08);} .tbm-item.danger svg{color:#E11D48;} [data-theme="dark"] .tb-menu{background-color:#111A2E;border-color:rgba(255,255,255,.1);} [data-theme="dark"] .tbm-id b,[data-theme="dark"] .tbm-item{color:#EEF3FF;} [data-theme="dark"] .tbm-item:hover{background:rgba(255,255,255,.06);} [data-theme="dark"] .tbm-sep{background:rgba(255,255,255,.09);} /* ===== Κέντρο υγείας ρυθμίσεων ===== */ .syshealth{margin-bottom:22px;} .sh-load{font-size:13px;color:#8492B0;padding:10px 0;} .sh-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;border:1px solid rgba(16,37,82,.1);background-color:#fff;} .sh-hd b{font-size:14.5px;color:#0E2552;} .sh-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;} .sh-hd.ok{border-color:rgba(16,185,129,.3);background-color:rgba(16,185,129,.05);} .sh-hd.ok .sh-dot{background:#10B981;box-shadow:0 0 9px rgba(16,185,129,.6);} .sh-hd.warn{border-color:rgba(245,158,11,.35);background-color:rgba(245,158,11,.06);} .sh-hd.warn .sh-dot{background:#F59E0B;box-shadow:0 0 9px rgba(245,158,11,.6);} .sh-hd.bad{border-color:rgba(239,68,68,.35);background-color:rgba(239,68,68,.05);} .sh-hd.bad .sh-dot{background:#EF4444;box-shadow:0 0 9px rgba(239,68,68,.6);} .sh-count{font-size:12.5px;color:#8492B0;} .sh-toggle{margin-left:auto;background:transparent;border:0;color:#2F6BFF;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;} .sh-toggle:hover{text-decoration:underline;} .sh-body{display:none;margin-top:12px;} .sh-body.open{display:block;} .sh-grp{margin-bottom:14px;} .sh-gt{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8492B0;margin:0 2px 7px;} .sh-item{display:flex;align-items:center;gap:11px;width:100%;background-color:#fff;border:1px solid rgba(16,37,82,.09);border-radius:11px;padding:10px 13px;margin-bottom:6px;font-family:inherit;text-align:left;cursor:pointer;transition:border-color .15s,transform .15s;} .sh-item:not([disabled]):hover{border-color:rgba(45,227,168,.5);transform:translateX(2px);} .sh-item[disabled]{cursor:default;opacity:.72;} .sh-mark{width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;} .sh-item.ok .sh-mark{background:#10B981;} .sh-item.warn .sh-mark{background:#F59E0B;} .sh-item.bad .sh-mark{background:#EF4444;} .sh-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;} .sh-txt b{font-size:13.5px;color:#0E2552;font-weight:600;} .sh-txt span{font-size:11.5px;color:#8492B0;} .sh-item.ok .sh-txt b{font-weight:500;} .sh-go{font-size:12px;font-weight:700;color:#2F6BFF;white-space:nowrap;} [data-theme="dark"] .sh-hd,[data-theme="dark"] .sh-item{background-color:#111A2E;border-color:rgba(255,255,255,.09);} [data-theme="dark"] .sh-hd b,[data-theme="dark"] .sh-txt b{color:#EEF3FF;} [data-theme="dark"] .sh-toggle,[data-theme="dark"] .sh-go{color:#5B9BFF;} /* ===== Γνήσια λογότυπα μαρκών ===== */ .brand-ic{display:block;flex:0 0 auto;} .st-tab .ic{display:inline-flex;align-items:center;} .st-tab .brand-ic{width:17px;height:17px;} /* Λογότυπα σε κάρτες λογαριασμών Studio (πριν ήταν emoji) */ .acc-logo,.gads-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;} .acc-logo .brand-ic{width:22px;height:22px;} .gads-ic .brand-ic{width:20px;height:20px;} /* Οι κάρτες «Σύντομα» είναι ξεθωριασμένες — κράτα το λογότυπο ευανάγνωστο */ .acc-card.soon .brand-ic{opacity:.75;} /* Ενεργό tab: λευκό «πλακίδιο» πίσω από το λογότυπο ώστε να κρατά τα αυθεντικά του χρώματα και να ξεχωρίζει πάνω στο σκούρο φόντο. */ .st-tab.on .ic{background:#fff;border-radius:6px;padding:3px;display:inline-flex;} /* Σκούρα σήματα (TikTok) σε σκούρο θέμα: διακριτικό φόντο */ [data-theme="dark"] .brand-ic[aria-label="TikTok"]{background:rgba(255,255,255,.9);border-radius:4px;}