/* ============================================================ SLAYD DESIGN TOKENS — canonical brand system Class names unchanged so ported markup keeps working. Light mode only. DESIGN LAW: squares not circles (radius scale: chips/badges 8, buttons/inputs 12, small avatars 10-12, cards 14-16, hero tiles 18-22; 50%/999px banned except 3-6px literal status dots); bright gradient borders on feature cards; washed page bg; serif-italic + mono-eyebrow typography. ============================================================ */ :root{ /* surfaces */ --cream:#fdf8f5; /* warm base (page uses --wash) */ --card:#FFFFFF; /* card surface */ --surface:#F5F3F4; /* inputs, sub-sheets */ --mid:#EBE8E9; /* neutral divider */ --overlay:rgba(58,31,48,0.45); /* text */ --plum:#3a1f30; /* primary text */ --mauve:#8a6f80; /* secondary text */ --mauve-2:rgba(138,111,128,.65); --hint:rgba(138,111,128,.45); /* brand */ --pink:#F166A8; /* fuchsia/magenta */ --purple:#8092D4; /* violet */ --gradient:linear-gradient(135deg,#F166A8 0%,#8092D4 100%); --gradient-h:linear-gradient(90deg,#F166A8 0%,#8092D4 100%); --gradient-rev:linear-gradient(135deg,#8092D4 0%,#F166A8 100%); /* soft fills */ --blush:#f7e4ec; /* avatar placeholder, image backdrop */ --soft-pink:#fbeef4; /* hover / selection */ --peach:#E0A891; /* warm gradient companion */ /* page wash — soft gradient page background (LAW #3d) */ --wash:linear-gradient(160deg,#fdf8f5,#faf0f4 55%,#f4ecf7); /* borders */ --border:#ecc2d6; /* rose hairline (inputs, row dividers) */ --border-soft:rgba(236,194,214,0.55); --border-strong:rgba(236,194,214,0.85); /* bright brand-gradient card borders (LAW #3c) — use with the double-background technique: border:1.2px solid transparent; background:var(--card-fill) padding-box, var(--g-border) border-box; */ --card-fill:linear-gradient(var(--card),var(--card)); --g-border:linear-gradient(135deg,rgba(241,102,168,.42),rgba(128,146,212,.42)); --g-border-strong:linear-gradient(135deg,rgba(241,102,168,.68),rgba(128,146,212,.68)); /* semantic */ --gold:#B49146; --green:#4CAF7D; --green-bg:rgba(76,175,125,0.14); --red:#DC2626; --red-bg:rgba(220,38,38,0.1); --amber:#B45309; --amber-bg:rgba(180,83,9,0.14); /* fonts */ --serif:'Cormorant Garamond',Georgia,serif; --sans:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; --mono:'DM Mono','SF Mono',ui-monospace,monospace; /* shadow recipes — always plum-tinted, never pure black */ --shadow-subtle:0 1px 4px rgba(58,31,48,0.04); --shadow-card:0 3px 8px rgba(58,31,48,0.06); --shadow-elev:0 6px 16px rgba(58,31,48,0.12); --shadow-rose:0 8px 18px rgba(241,102,168,0.22); } /* ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} html,body{font-family:var(--sans);background:var(--cream);color:var(--plum);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} button{font-family:inherit;font-size:inherit;color:inherit;border:none;background:none;cursor:pointer} input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} a{color:var(--purple);text-decoration:none;cursor:pointer} [hidden]{display:none!important} /* soft page wash (LAW #3d) — on , .login and .main */ .page-wash{background:var(--wash)} /* === INLINE SVG ICONS === */ .ic{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;width:1em;height:1em;font-style:normal} .ic svg{width:100%;height:100%;display:block} /* ============================================================ DESIGN-SYSTEM COMPONENTS (reusable — module crews start here) ============================================================ */ /* --- THE WORDMARK (LAW #2) — one class everywhere. Solid fallback color declared FIRST, then gradient text fill. .topbar-logo / .login-logo are legacy aliases kept for module templates; they inherit the same recipe. --- */ /* Wordmark mirrors the iOS SlaydLogoView: system serif (ui-serif = New York on Apple devices, exactly the app's font), HEAVY weight, italic, tight tracking, pink→purple gradient. padding-bottom is load-bearing and in EM so it scales: background-clip:text only paints inside the box, and the italic heavy "y" descends below the line box — without the padding the tail renders invisible (the app needed the same descender fix, see SlaydLogoView.swift). */ .slayd-logo,.topbar-logo,.login-logo{ font-family:ui-serif,'New York',var(--serif);font-style:italic;font-weight:800; font-size:29px;letter-spacing:-0.02em;line-height:1.05; color:#b0509a; background:linear-gradient(135deg,#F166A8,#8092D4); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; display:inline-block;padding-bottom:0.22em;margin-bottom:-0.1em} .topbar-logo{cursor:pointer} .slayd-logo-lg,.login-logo{font-size:48px} /* SVG wordmark (assets/slayd-wordmark.svg) — the app's ACTUAL logo (New York Heavy Italic glyphs + the app's #F166A8->#8092D4 gradient), rendered to vector so it is identical in every browser and can never be clipped. */ .slayd-logo-img{height:34px;width:auto;display:block} .slayd-logo-img.lg{height:58px;margin:0 auto} .topbar-logo-img{cursor:pointer} /* --- ROUNDED-RECT AVATAR (.sq-av + size variants) --- */ .sq-av{display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;text-transform:uppercase;font-family:var(--sans);background:var(--blush);color:#7a4456;overflow:hidden} .sq-av img{width:100%;height:100%;object-fit:cover;display:block} .sq-av-sm{width:28px;height:28px;border-radius:10px;font-size:10px} .sq-av-32{width:32px;height:32px;border-radius:10px;font-size:11px} .sq-av-md{width:40px;height:40px;border-radius:12px;font-size:12px} .sq-av-lg{width:56px;height:56px;border-radius:14px;font-size:16px} .sq-av-xl{width:80px;height:80px;border-radius:20px;font-size:24px;font-family:var(--serif);font-style:italic;font-weight:500} .sq-av.grad{background:var(--gradient);color:#fff;box-shadow:var(--shadow-rose)} /* --- ICON TILE (.icon-tile + sizes) — blush gradient tile, brand icon; use inside empty states, feature rows, heroes --- */ .icon-tile{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--blush),var(--soft-pink));color:var(--pink);flex-shrink:0;border:1.2px solid transparent;background:linear-gradient(135deg,var(--blush),var(--soft-pink)) padding-box,var(--g-border) border-box} .icon-tile i,.icon-tile .ic{font-size:22px} .icon-tile-sm{width:36px;height:36px;border-radius:10px} .icon-tile-sm i,.icon-tile-sm .ic{font-size:16px} .icon-tile-lg{width:56px;height:56px;border-radius:16px} .icon-tile-lg i,.icon-tile-lg .ic{font-size:26px} .icon-tile-xl{width:84px;height:84px;border-radius:22px} .icon-tile-xl i,.icon-tile-xl .ic{font-size:36px} /* --- GRADIENT-BORDERED CARD (.g-card) — LAW #3c. Double-background technique, no JS, works with radius. --- */ .g-card{border:1.2px solid transparent;border-radius:16px;background:var(--card-fill) padding-box,var(--g-border) border-box;box-shadow:var(--shadow-subtle)} /* horizontal list-item variant — use as class="g-card g-row" */ .g-row{display:flex;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap} /* vertical stack of .g-card rows */ .g-list{display:grid;gap:10px} /* 12px mauve secondary line under a row title */ .row-meta{font-size:12px;color:var(--mauve);margin-top:2px;line-height:1.5} /* --- BRAND HERO PANEL (.hero-g) — gradient bg, white text --- */ .hero-g{position:relative;background:var(--gradient);border-radius:16px;padding:22px;color:#fff;overflow:hidden;box-shadow:var(--shadow-rose)} .hero-g::before{content:'';position:absolute;top:0;left:0;width:60%;height:100%;background:radial-gradient(circle at top left,rgba(255,255,255,0.26),transparent 60%);pointer-events:none} .hero-g > *{position:relative;z-index:1} /* --- EYEBROW + SECTION TITLE (LAW #3e) --- */ .eyebrow{font-family:var(--mono);font-size:11px;color:var(--mauve);font-weight:700;letter-spacing:1.5px;text-transform:uppercase} .section-title{font-family:var(--serif);font-style:italic;font-size:20px;font-weight:500;color:var(--plum);letter-spacing:-.01em} /* --- EMPTY STATE CARD (.empty-card) — LAW #3b: bordered card, icon tile, serif title, one-line sub, CTA --- */ .empty-card{border:1.2px solid transparent;border-radius:16px;background:var(--card-fill) padding-box,var(--g-border) border-box;padding:44px 24px;text-align:center;color:var(--mauve)} .empty-card .icon-tile{margin:0 auto 16px} .empty-card h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;color:var(--plum);margin-bottom:6px;letter-spacing:-.01em} .empty-card p{font-size:13px;max-width:360px;margin:0 auto;line-height:1.6} .empty-card .btn{margin-top:18px} /* === LOGIN === */ .login{min-height:100vh;background:var(--wash);display:flex;align-items:center;justify-content:center;padding:40px 20px;position:relative;overflow:hidden} .login::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,var(--soft-pink),transparent 70%);opacity:.8} .login::after{content:'';position:absolute;bottom:-200px;left:-200px;width:500px;height:500px;background:radial-gradient(circle,rgba(128,146,212,0.18),transparent 70%);opacity:.8} .login-inner{max-width:920px;width:100%;position:relative;z-index:1} .login-head{text-align:center;margin-bottom:34px} .login-tag{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--plum);margin-top:8px;font-weight:400} /* === APP SHELL === */ .app{display:grid;grid-template-columns:248px 1fr;grid-template-rows:64px 1fr;min-height:100vh} .topbar{grid-column:1/-1;background:var(--card);border-bottom:0.6px solid var(--border-soft);display:flex;align-items:center;padding:0 24px;gap:16px;z-index:10;position:sticky;top:0} .role-pill{font-family:var(--mono);font-size:9px;font-weight:700;padding:4px 11px;border-radius:8px;color:#fff;background:var(--gradient-h);letter-spacing:.12em;text-transform:uppercase} .topbar-spacer{flex:1} .topbar-search{position:relative;width:300px} .topbar-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--mauve-2)} .topbar-search input{width:100%;background:var(--surface);border:0.6px solid transparent;border-radius:12px;padding:9px 12px 9px 36px;font-size:13px;color:var(--plum);transition:all .15s} .topbar-search input::placeholder{color:var(--hint)} .topbar-search input:focus{outline:none;border-color:var(--border);background:var(--card)} .topbar-icon-btn{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--mauve);position:relative;transition:background .15s} .topbar-icon-btn:hover{background:var(--surface)} .topbar-icon-btn i{font-size:18px} .topbar-icon-btn .badge{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 2px var(--card)} /* literal status dot — 50% allowed */ .topbar-avatar{width:38px;height:38px;border-radius:11px;background:var(--gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;cursor:pointer;border:2px solid var(--card);box-shadow:0 0 0 1.2px rgba(241,102,168,.45)} /* === TOPBAR NOTIFICATIONS === */ .topbar-bell{position:relative;width:38px;height:38px;border-radius:11px;border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--plum)} .topbar-bell svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .topbar-bell .bell-dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,var(--pink),var(--purple));box-shadow:0 0 6px rgba(241,102,168,.6);display:none} .topbar-bell.has-unread .bell-dot{display:block} .notif-menu{position:fixed;top:58px;right:66px;border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:14px;box-shadow:var(--shadow-elev);padding:8px;width:330px;max-width:calc(100vw - 24px);max-height:70vh;overflow-y:auto;z-index:50} .notif-menu .nm-head{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mauve);padding:8px 10px 6px} .notif-row{display:flex;gap:10px;padding:10px;border-radius:10px;align-items:flex-start} .notif-row.unread{background:var(--surface)} .notif-row+.notif-row{margin-top:2px} .notif-row .nr-tile{width:30px;height:30px;border-radius:9px;flex-shrink:0;background:linear-gradient(135deg,var(--pink),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff} .notif-row .nr-tile svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .notif-row .nr-title{font-size:12.5px;font-weight:700;color:var(--plum);line-height:1.3} .notif-row .nr-body{font-size:12px;color:var(--mauve);line-height:1.45;margin-top:2px} .notif-row .nr-time{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mauve-2);margin-top:4px} .notif-empty{padding:26px 12px;text-align:center;font-size:12.5px;color:var(--mauve)} @media(max-width:768px){.notif-menu{right:12px}} .avatar-menu{position:fixed;top:58px;right:24px;border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:14px;box-shadow:var(--shadow-elev);padding:8px;min-width:230px;z-index:50} .avatar-menu .am-head{padding:10px 12px;border-bottom:0.6px solid var(--border-soft);margin-bottom:6px} .avatar-menu .am-name{font-weight:600;font-size:13px;color:var(--plum)} .avatar-menu .am-email{font-size:11px;color:var(--mauve);margin-top:2px} .avatar-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:10px;font-size:13px;color:var(--plum);text-align:left} .avatar-menu button:hover{background:var(--surface)} .avatar-menu button i{font-size:15px;color:var(--mauve)} /* === SIDEBAR === */ .sidebar{background:var(--card);border-right:0.6px solid var(--border-soft);padding:18px 12px;overflow-y:auto;position:sticky;top:64px;height:calc(100vh - 64px)} .side-group{font-family:var(--mono);font-size:9px;color:var(--mauve);letter-spacing:.16em;text-transform:uppercase;padding:16px 12px 8px;font-weight:700} .side-group:first-child{padding-top:6px} .nav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;font-size:13px;color:#4a3140;cursor:pointer;position:relative;transition:background .12s;margin-bottom:1px;font-weight:500} .nav:hover:not(.active){background:var(--surface)} .nav i{font-size:16px;color:var(--mauve);flex-shrink:0} .nav.active{background:linear-gradient(135deg,var(--soft-pink),rgba(128,146,212,0.10));color:var(--plum);font-weight:600} .nav.active i{color:var(--pink)} /* active nav gets a 3px SQUARE gradient left bar */ .nav.active::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0;background:var(--gradient)} .nav-tag{margin-left:auto;font-family:var(--mono);font-size:8px;background:var(--surface);color:var(--mauve);padding:3px 7px;border-radius:5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700} .nav-dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px var(--soft-pink)} /* literal status dot — 50% allowed */ .nav-count{margin-left:auto;font-size:10px;background:var(--gradient-h);color:#fff;padding:2px 8px;border-radius:8px;font-weight:700;min-width:22px;text-align:center} .upsell{margin-top:22px;border:1.2px solid transparent;background:linear-gradient(135deg,var(--soft-pink),rgba(128,146,212,0.14)) padding-box,var(--g-border) border-box;border-radius:14px;padding:16px} .upsell .us-title{font-family:var(--serif);font-style:italic;font-size:20px;font-weight:500;margin-bottom:4px;color:var(--plum);letter-spacing:-.01em} .upsell .us-body{font-size:11px;color:var(--mauve);line-height:1.55;margin-bottom:12px} .upsell button{background:var(--gradient-h);color:#fff;font-size:11px;font-weight:600;padding:8px 12px;border-radius:9px;width:100%} /* === MAIN === */ .main{padding:32px 44px;overflow-y:auto;background:var(--wash)} .page-head{margin-bottom:26px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap} .page-head .ph-text small.eyebrow{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--mauve);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;background:rgba(255,255,255,.75);padding:5px 11px;border-radius:6px} .page-head h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:42px;letter-spacing:-.015em;line-height:1.05;color:var(--plum)} .page-head h1 + p{font-size:14px;color:var(--mauve);margin-top:8px;max-width:640px;line-height:1.6} .page-actions{display:flex;gap:10px;align-items:center} /* === SECTION HEADS === */ .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 2px} .section-head h3{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mauve)} .section-head .ph-link{font-family:var(--mono);font-size:10px;color:var(--purple);font-weight:700;cursor:pointer;letter-spacing:.12em;text-transform:uppercase} .section{margin-bottom:28px} /* === BUTTONS === */ .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;transition:all .15s;white-space:nowrap;font-family:var(--sans)} .btn i{font-size:16px} .btn-primary{background:var(--gradient-h);color:#fff;box-shadow:0 4px 10px rgba(241,102,168,0.22)} .btn-primary:hover{box-shadow:var(--shadow-rose);transform:translateY(-1px)} .btn-secondary{background:var(--card);color:var(--plum);box-shadow:0 0 0 0.6px var(--border)} .btn-secondary:hover{background:var(--surface)} .btn-ghost{color:var(--mauve)} .btn-ghost:hover{background:var(--surface);color:var(--plum)} .btn-danger{background:var(--card);color:var(--red);box-shadow:0 0 0 0.6px rgba(220,38,38,0.3)} .btn-danger:hover{background:var(--red-bg)} .btn-sm{padding:7px 13px;font-size:12px;border-radius:10px} .btn-sm i{font-size:14px} .btn-pill{border-radius:12px} /* legacy alias — pills are squares now */ /* === KPIs / STAT TILES — ALWAYS render (zeros are honest data) === */ .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px} .kpi-row.kpi-3{grid-template-columns:repeat(3,1fr)} .kpi{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;padding:18px 20px;position:relative;overflow:hidden;transition:transform .15s} .kpi:hover{transform:translateY(-1px)} .kpi .kpi-lab{font-family:var(--mono);font-size:10px;color:var(--mauve);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px} .kpi .kpi-val{font-family:var(--serif);font-style:italic;font-size:22px;font-weight:600;color:var(--plum);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.01em} .kpi .kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--green);margin-top:8px;font-weight:600} .kpi .kpi-delta.dn{color:var(--red)} .kpi .kpi-delta i{font-size:13px} /* === HERO CARD (gradient w/ radial highlight + motif) === */ .hero-card{position:relative;background:var(--gradient);border-radius:18px;padding:24px;overflow:hidden;color:#fff;min-height:200px;box-shadow:var(--shadow-rose)} .hero-card::before{content:'';position:absolute;top:0;left:0;width:60%;height:100%;background:radial-gradient(circle at top left,rgba(255,255,255,0.28),transparent 60%);pointer-events:none} .hero-card::after{content:'';position:absolute;top:14px;right:14px;width:120px;height:120px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' fill-opacity='0.13'%3E%3Cpath d='M12 1.5l1.5 4.5h4.5l-3.75 3 1.5 4.5L12 10.5l-3.75 3 1.5-4.5L6 6h4.5z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;transform:rotate(-8deg);pointer-events:none} .hero-card .h-eyebrow,.hero-g .h-eyebrow{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,0.88);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;position:relative;z-index:1} .hero-card .h-value,.hero-g .h-value{font-family:var(--serif);font-style:italic;font-size:60px;font-weight:500;color:#fff;line-height:1;letter-spacing:-.02em;margin-bottom:10px;position:relative;z-index:1;font-variant-numeric:tabular-nums} /* text-sized hero value — for NAMES in heroes (60px numerals overflow) */ .hero-card .h-value.h-value-name,.hero-g .h-value.h-value-name{font-size:clamp(30px,4.6vw,46px)} .hero-card .h-sub,.hero-g .h-sub{font-size:14px;color:rgba(255,255,255,0.88);position:relative;z-index:1;line-height:1.5} .hero-card .h-pills,.hero-g .h-pills{display:flex;gap:8px;margin-top:14px;position:relative;z-index:1;flex-wrap:wrap} .hero-pill{font-family:var(--mono);font-size:10px;font-weight:700;color:#fff;background:rgba(255,255,255,0.22);padding:5px 11px;border-radius:8px;letter-spacing:.08em} .hero-cta{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--plum);font-size:13px;font-weight:700;padding:9px 16px;border-radius:12px;margin-top:14px;position:relative;z-index:1} /* === PANELS / CARDS === */ .panel-row{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;margin-bottom:22px} .panel{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;overflow:hidden} .panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px} .panel-head h3{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mauve)} .panel-head .ph-link{font-family:var(--mono);font-size:10px;color:var(--purple);font-weight:700;cursor:pointer;letter-spacing:.12em;text-transform:uppercase} .panel-body{padding:0 22px 20px} /* === LIST ROWS === */ .list-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:0.6px solid var(--border-soft)} .list-row:first-child{border-top:none;padding-top:6px} .list-row .lr-time{font-variant-numeric:tabular-nums;color:var(--mauve);font-size:12px;min-width:74px;font-weight:600;font-family:var(--mono)} .list-row .lr-info{flex:1;min-width:0} .list-row .lr-name{font-size:13px;font-weight:600;color:var(--plum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .list-row .lr-sub{font-size:12px;color:var(--mauve);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* === AVATARS — rounded squares EVERYWHERE (LAW #1) === */ .av{display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;text-transform:uppercase;font-family:var(--sans)} .av-sq{border-radius:12px} .av-sq.av-lg{border-radius:14px} .av-c{border-radius:12px} /* legacy "circle" alias — squared by law */ .av-28{width:28px;height:28px;font-size:10px;border-radius:10px} .av-32{width:32px;height:32px;font-size:11px;border-radius:10px} .av-40{width:40px;height:40px;font-size:12px;border-radius:12px} .av-44{width:44px;height:44px;font-size:13px;border-radius:12px} .av-48{width:48px;height:48px;font-size:14px;border-radius:14px} .av-56{width:56px;height:56px;font-size:16px;border-radius:14px} .av-72{width:72px;height:72px;font-size:22px;font-family:var(--serif);font-style:italic;font-weight:500;border-radius:18px} .av-blush{background:var(--blush);color:#7a4456} .av-purple{background:rgba(128,146,212,0.16);color:#53398f} .av-cream{background:var(--surface);color:var(--plum)} .av-grad{background:var(--gradient);color:#fff;box-shadow:var(--shadow-rose)} .av-ring{box-shadow:0 0 0 1.2px rgba(241,102,168,.4)} /* === PILLS (status badges — 8px rounded rects) === */ .pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px;font-weight:700;padding:4px 9px;border-radius:6px;letter-spacing:.1em;text-transform:uppercase} .pill-up{background:rgba(128,146,212,0.16);color:#53398f} .pill-now{background:var(--soft-pink);color:#a8336e} .pill-done{background:var(--green-bg);color:#246f4e} .pill-wait{background:var(--amber-bg);color:#7e3e0b} .pill-cancel{background:var(--red-bg);color:#9c1f1f} .pill-info{background:var(--surface);color:var(--mauve)} .pill-gold{background:rgba(180,145,70,0.16);color:#7d6325} /* === ALERTS / NOTES === */ .alert{font-size:12px;color:var(--mauve);padding:11px 0;border-top:0.6px solid var(--border-soft);line-height:1.55} .alert:first-child{border-top:none;padding-top:4px} .alert b{display:block;color:var(--plum);font-weight:600;font-size:13px;margin-bottom:3px} .alert a{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .alert-card{background:var(--soft-pink);border-radius:14px;padding:14px 16px;margin-bottom:12px;font-size:12px;color:#7a4456;line-height:1.6;border:1.2px solid rgba(241,102,168,0.25)} .alert-card b{display:block;color:var(--plum);font-size:13px;margin-bottom:4px;font-weight:600} .alert-card.success{background:var(--green-bg);color:#1f5e44;border-color:rgba(76,175,125,0.3)} .alert-card.success b{color:#0a4a32} .alert-card.peri{background:rgba(128,146,212,0.12);color:#42307a;border-color:rgba(128,146,212,0.35)} .alert-card.peri b{color:#2d2054} /* === QUICK ACTIONS === */ .qa{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px} .qa-btn{background:var(--surface);padding:12px 13px;border-radius:12px;font-size:12px;color:var(--plum);display:flex;align-items:center;gap:9px;font-weight:600;transition:background .15s;text-align:left;border:0.6px solid transparent} .qa-btn:hover{background:var(--blush);border-color:var(--border-soft)} .qa-btn i{font-size:15px;color:var(--pink)} .qa-btn.primary{background:var(--gradient-h);color:#fff;grid-column:1/-1;padding:14px;box-shadow:0 4px 10px rgba(241,102,168,0.22);border:none} .qa-btn.primary i{color:#fff;background:none;-webkit-background-clip:initial;background-clip:initial} .qa-btn.primary:hover{box-shadow:var(--shadow-rose)} .qa-btn.muted{background:var(--card);color:var(--mauve);border:0.6px solid var(--border-soft)} .qa-btn.muted i{color:var(--mauve);background:none;-webkit-background-clip:initial;background-clip:initial} /* === COMMISSION CARD === */ .comm-card{background:var(--gradient);border-radius:18px;padding:22px;margin-bottom:14px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-rose)} .comm-card::before{content:'';position:absolute;top:0;left:0;width:60%;height:100%;background:radial-gradient(circle at top left,rgba(255,255,255,0.22),transparent 60%);pointer-events:none} .comm-card > *{position:relative;z-index:1} .comm-card .cc-tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;color:rgba(255,255,255,0.88)} .comm-card .cc-title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:28px;line-height:1.1;margin-bottom:10px;letter-spacing:-.015em} .comm-card .cc-body{font-size:13px;line-height:1.6;margin-bottom:18px;color:rgba(255,255,255,0.92)} .comm-card .cc-actions{display:flex;gap:8px} .comm-card .cc-btn{flex:1;padding:10px;border-radius:10px;font-size:12px;font-weight:700;text-align:center;transition:all .15s;font-family:var(--sans)} .comm-card .cc-accept{background:#fff;color:var(--plum)} .comm-card .cc-accept:hover{background:rgba(255,255,255,0.92)} .comm-card .cc-counter{background:rgba(255,255,255,0.22);color:#fff} .comm-card .cc-counter:hover{background:rgba(255,255,255,0.32)} .comm-card .cc-decline{background:transparent;color:rgba(255,255,255,0.7)} .comm-card .cc-decline:hover{color:#fff} /* === TABLES (grey/rose hairlines allowed on ROW DIVIDERS only) === */ .tbl-wrap{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch} .tbl-filters{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:0.6px solid var(--border-soft);flex-wrap:wrap} .tbl-search{position:relative;flex:1;max-width:340px} .tbl-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--mauve-2)} .tbl-search input{width:100%;background:var(--surface);border:0.6px solid transparent;border-radius:10px;padding:9px 12px 9px 36px;font-size:13px} .tbl-search input:focus{outline:none;border-color:var(--border);background:var(--card)} .tbl-filter{display:inline-flex;align-items:center;gap:6px;background:var(--surface);padding:8px 12px;border-radius:10px;font-size:12px;color:var(--plum);cursor:pointer;font-weight:600;transition:background .15s} .tbl-filter:hover{background:var(--blush)} .tbl-filter i{font-size:14px;color:var(--mauve)} .tbl{width:100%;border-collapse:collapse} .tbl th{text-align:left;font-family:var(--mono);font-size:9px;color:var(--mauve);font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:13px 20px;border-bottom:0.6px solid var(--border-soft);background:var(--surface)} .tbl td{padding:14px 20px;border-bottom:0.6px solid var(--border-soft);font-size:13px;color:var(--plum)} .tbl tr:last-child td{border-bottom:none} .tbl tr.clickable{cursor:pointer;transition:background .12s} .tbl tr.clickable:hover{background:var(--surface)} .tbl .tbl-cell-user{display:flex;align-items:center;gap:11px} .tbl .tbl-cell-user .name{font-weight:600} .tbl-actions{display:flex;gap:4px;justify-content:flex-end} .tbl-icon-btn{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--mauve);transition:all .12s} .tbl-icon-btn:hover{background:var(--surface);color:var(--purple)} .tbl-icon-btn i{font-size:15px} /* === ENTITY CARDS GRID === */ .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .entity-card{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;padding:20px;transition:all .15s;cursor:pointer} .entity-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);background:var(--card-fill) padding-box,var(--g-border-strong) border-box} .entity-card .ec-top{display:flex;align-items:center;gap:13px;margin-bottom:14px} .entity-card .ec-info{flex:1;min-width:0} .entity-card .ec-name{font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;color:var(--plum);letter-spacing:-.01em} .entity-card .ec-role{font-size:12px;color:var(--mauve);margin-top:2px} .entity-card .ec-stats{display:flex;gap:14px;font-size:12px;padding-top:14px;border-top:0.6px solid var(--border-soft)} .entity-card .ec-stat{flex:1} .entity-card .ec-stat-lab{font-family:var(--mono);color:var(--mauve);font-size:9px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px;font-weight:700} .entity-card .ec-stat-val{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--plum);font-size:18px;letter-spacing:-.005em} .entity-card.dashed{background:transparent;border:1.5px dashed var(--border)} .entity-card.dashed:hover{background:var(--surface);border-color:var(--purple)} /* === FORMS === */ .form-row{margin-bottom:18px} .form-row label{display:block;font-family:var(--mono);font-size:10px;color:var(--mauve);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px} .form-row input[type=text],.form-row input[type=email],.form-row input[type=tel],.form-row input[type=number],.form-row input[type=date],.form-row input[type=time],.form-row input[type=password],.form-row select,.form-row textarea{width:100%;background:var(--surface);border:0.6px solid transparent;border-radius:12px;padding:12px 14px;font-size:14px;color:var(--plum);transition:all .15s;font-family:var(--sans)} .form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;background:var(--card);border-color:var(--purple);box-shadow:0 0 0 3px rgba(128,146,212,0.15)} .form-row textarea{min-height:90px;resize:vertical} .form-row input::placeholder,.form-row textarea::placeholder{color:var(--hint)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .radio-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px} .radio-card{background:var(--surface);border-radius:14px;padding:16px;cursor:pointer;border:1.5px solid transparent;transition:all .15s} .radio-card.selected{background:linear-gradient(135deg,var(--soft-pink),rgba(128,146,212,0.12));border-color:var(--purple)} .radio-card .rc-title{font-weight:600;font-size:13px;margin-bottom:5px;color:var(--plum)} .radio-card .rc-body{font-size:11px;color:var(--mauve);line-height:1.5} /* === TOGGLES + TASK ROWS + HOURS GRID === */ .toggle{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;flex-shrink:0} .toggle input{opacity:0;width:0;height:0} .toggle .slider{position:absolute;inset:0;background:var(--mid);border-radius:8px;transition:.2s} .toggle .slider:before{position:absolute;content:'';height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:6px;transition:.2s;box-shadow:var(--shadow-subtle)} .toggle input:checked + .slider{background:var(--gradient-h)} .toggle input:checked + .slider:before{transform:translateX(18px)} .task-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:0.6px solid var(--border-soft);transition:background .12s} .task-row:first-child{border-top:none} .task-row:hover{background:var(--surface)} .task-row.done .task-title{color:var(--mauve);text-decoration:line-through;text-decoration-color:var(--border)} .task-check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--card);transition:all .12s;flex-shrink:0} .task-check.done{background:var(--gradient-h);border-color:transparent;color:#fff} .task-check.done i{font-size:13px} .task-info{flex:1;min-width:0} .task-title{font-size:14px;font-weight:600;color:var(--plum);margin-bottom:3px} .task-meta{font-size:11px;color:var(--mauve);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-weight:700} .pill-high{background:rgba(220,38,38,0.14);color:#9c1f1f} .pill-med{background:var(--amber-bg);color:#7e3e0b} .pill-low{background:rgba(128,146,212,0.16);color:#53398f} .hours-grid{display:grid;grid-template-columns:1fr;gap:0;border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;overflow:hidden} .hours-row{display:grid;grid-template-columns:140px 1fr 1fr 60px 100px;gap:14px;align-items:center;padding:14px 20px;border-top:0.6px solid var(--border-soft)} .hours-row:first-child{border-top:none} .hours-row.closed{opacity:.55} .hours-row .h-day{font-weight:600;font-size:14px;color:var(--plum)} .hours-row input[type=time]{background:var(--surface);border:0.6px solid transparent;border-radius:10px;padding:8px 12px;font-size:13px;color:var(--plum);font-variant-numeric:tabular-nums;width:100%} .hours-row input[type=time]:focus{outline:none;background:var(--card);border-color:var(--purple)} .hours-row .h-closed-lab{font-family:var(--mono);font-size:9px;color:var(--mauve);font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:right} /* === MODAL === */ .modal-bg{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;animation:fadeIn .18s} .modal{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:18px;max-width:580px;width:100%;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(58,31,48,0.25);overflow:hidden} .modal.wide{max-width:760px} .modal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 26px 20px;border-bottom:0.6px solid var(--border-soft)} .modal-head h2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:28px;letter-spacing:-.015em;line-height:1.15;color:var(--plum)} .modal-head p{font-size:13px;color:var(--mauve);margin-top:6px;line-height:1.5} .modal-close{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--mauve);transition:background .12s;flex-shrink:0} .modal-close:hover{background:var(--surface);color:var(--plum)} .modal-body{padding:24px 26px;overflow-y:auto} .modal-foot{padding:18px 26px;border-top:0.6px solid var(--border-soft);display:flex;gap:10px;justify-content:flex-end;background:var(--surface)} @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* === TOAST === */ .toasts{position:fixed;bottom:28px;right:28px;display:flex;flex-direction:column;gap:8px;z-index:200} .toast{background:var(--plum);color:#fff;border-radius:12px;padding:11px 18px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-elev);font-size:13px;font-weight:600;animation:slideIn .25s;min-width:220px} .toast i{font-size:16px;color:var(--green)} .toast.err i{color:#ff8c8c} @keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}} /* === EMPTY (LAW #3b — a bordered card, icon tile, serif title) === */ .empty{padding:44px 24px;text-align:center;color:var(--mauve);border:1.2px solid transparent;border-radius:16px;background:var(--card-fill) padding-box,var(--g-border) border-box} .empty .empty-circle{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--blush),var(--soft-pink));display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--shadow-subtle);color:var(--pink)} .empty .empty-circle i{font-size:24px;color:var(--pink)} .empty .icon-tile{margin:0 auto 16px} /* glue: icon tiles center inside legacy .empty too */ .empty h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;color:var(--plum);margin-bottom:8px;letter-spacing:-.01em} .empty p{font-size:13px;max-width:340px;margin:0 auto;line-height:1.6} .empty .btn{margin-top:18px} /* === TABS === */ .tabs{display:flex;gap:6px;border-bottom:0.6px solid var(--border-soft);margin-bottom:22px;overflow-x:auto} .tab{padding:11px 0;margin-right:22px;font-family:var(--mono);font-size:10px;color:var(--mauve);font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-0.6px;white-space:nowrap;transition:color .12s} .tab:hover{color:var(--plum)} .tab.active{color:var(--plum);border-bottom-color:var(--pink)} /* === CALENDAR === */ .cal-week{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;overflow:hidden} .cal-head{display:grid;grid-template-columns:64px repeat(7,1fr);border-bottom:0.6px solid var(--border-soft);background:var(--surface)} .cal-head .ch-cell{padding:14px 8px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--mauve);font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-left:0.6px solid var(--border-soft)} .cal-head .ch-cell:first-child{border-left:none} .cal-head .ch-cell .cal-day-num{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;color:var(--plum);margin-top:3px;letter-spacing:-.01em} .cal-head .ch-cell.today{background:linear-gradient(180deg,var(--soft-pink),transparent)} .cal-head .ch-cell.today .cal-day-num{background:var(--gradient-h);-webkit-background-clip:text;background-clip:text;color:transparent} .cal-body{display:grid;grid-template-columns:64px repeat(7,1fr);max-height:560px;overflow-y:auto} .cal-time{padding:8px;font-family:var(--mono);font-size:9px;color:var(--mauve);text-align:right;border-top:0.6px solid var(--border-soft);min-height:62px;font-weight:600;letter-spacing:.06em} .cal-cell{border-top:0.6px solid var(--border-soft);border-left:0.6px solid var(--border-soft);min-height:62px;padding:3px;position:relative} .cal-event{background:linear-gradient(135deg,var(--soft-pink),rgba(128,146,212,0.12));border-left:3px solid var(--purple);border-radius:8px;padding:7px 9px;font-size:11px;color:var(--plum);cursor:pointer;margin-bottom:2px;transition:transform .12s} .cal-event:hover{transform:scale(1.02)} .cal-event .ce-time{font-family:var(--mono);font-size:9px;color:var(--mauve);margin-bottom:1px;font-weight:600;letter-spacing:.04em} .cal-event .ce-name{font-weight:600} .cal-event.pink{background:var(--soft-pink);border-left-color:var(--pink)} /* === CHART === */ .chart-wrap{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;padding:26px;margin-bottom:22px} .chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px} .chart-head h3{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mauve)} .chart-bars{display:flex;align-items:flex-end;gap:14px;height:200px;padding:30px 0} .chart-bar{flex:1;background:var(--gradient);border-radius:8px 8px 0 0;position:relative;min-height:4px;transition:all .2s;cursor:pointer} .chart-bar:hover{opacity:.85} .chart-bar .cb-val{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-family:var(--serif);font-style:italic;font-size:14px;color:var(--plum);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap} .chart-bar .cb-lab{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;color:var(--mauve);font-weight:700;letter-spacing:.08em;text-transform:uppercase} /* === MESSAGES === */ .msg-list{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;overflow:hidden} .msg-row{display:flex;gap:13px;padding:14px 18px;border-top:0.6px solid var(--border-soft);cursor:pointer;transition:background .12s;align-items:center} .msg-row:first-child{border-top:none} .msg-row:hover{background:var(--surface)} .msg-row.unread{background:linear-gradient(135deg,rgba(251,238,244,0.55),transparent)} .msg-row .mr-content{flex:1;min-width:0} .msg-row .mr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px} .msg-row .mr-name{font-weight:700;font-size:14px;color:var(--plum)} .msg-row .mr-time{font-family:var(--mono);font-size:10px;color:var(--mauve);font-weight:600} .msg-row .mr-preview{font-size:13px;color:var(--mauve);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .msg-row.unread .mr-preview{color:var(--plum)} .msg-row .mr-dot{width:6px;height:6px;border-radius:50%;background:var(--pink);align-self:center;flex-shrink:0;box-shadow:0 0 0 3px var(--soft-pink)} /* literal status dot — 50% allowed */ /* === REVIEW === */ .review{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;padding:20px 22px;margin-bottom:12px} .review-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px} .review-stars{color:var(--gold);font-size:14px;letter-spacing:1px} .review-body{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--plum);line-height:1.5;margin-bottom:14px;letter-spacing:-.005em} .review-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--mauve)} /* === PORTFOLIO === */ .portfolio{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px} .portfolio .pf{aspect-ratio:4/5;border-radius:14px;cursor:pointer;transition:transform .2s;position:relative;overflow:hidden;border:0.6px solid var(--border-soft)} .portfolio .pf:hover{transform:scale(1.02);box-shadow:var(--shadow-card)} .portfolio .pf-1{background:linear-gradient(135deg,#fbeef4,#F166A8)} .portfolio .pf-2{background:linear-gradient(135deg,#eae4f6,#8092D4)} .portfolio .pf-3{background:linear-gradient(135deg,#f7e4ec,#E0A891)} .portfolio .pf-4{background:linear-gradient(135deg,#fbeef4,#D88BB2)} .portfolio .pf-5{background:linear-gradient(135deg,#EAF5F0,#7DC9A6)} .portfolio .pf-6{background:linear-gradient(135deg,#FAEEDA,#B49146)} .portfolio .pf-meta{position:absolute;bottom:0;left:0;right:0;padding:14px 12px 10px;background:linear-gradient(transparent,rgba(58,31,48,0.6));color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em} /* ============================================================ CLIENT / BEAUTY-LOVER SURFACES reuses every token + component above; only net-new bits here ============================================================ */ /* gradient swatches (shared image/thumb backdrops) */ .g-1{background:linear-gradient(135deg,#fbeef4,#F166A8)} .g-2{background:linear-gradient(135deg,#eae4f6,#8092D4)} .g-3{background:linear-gradient(135deg,#f7e4ec,#E0A891)} .g-4{background:linear-gradient(135deg,#fbeef4,#D88BB2)} .g-5{background:linear-gradient(135deg,#EAF5F0,#7DC9A6)} .g-6{background:linear-gradient(135deg,#FAEEDA,#B49146)} .g-7{background:linear-gradient(135deg,#EDE7FA,#9B7BD4)} .g-8{background:linear-gradient(135deg,#FCEAE2,#E8845E)} /* category chips (horizontal scroller) — 8px rounded rects */ .chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;margin-bottom:18px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:8px;font-size:12px;font-weight:600;color:var(--mauve);background:var(--card);border:0.6px solid var(--border);cursor:pointer;transition:all .15s;white-space:nowrap} .chip i{font-size:14px} .chip:hover{border-color:var(--border-strong);color:var(--plum)} .chip.active{background:var(--gradient-h);color:#fff;border-color:transparent;box-shadow:0 4px 10px rgba(241,102,168,0.22)} .chip.active i{color:#fff} /* discover / provider cards (consumer marketplace) */ .disco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px} .disco{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column} .disco:hover{transform:translateY(-3px);box-shadow:var(--shadow-elev);background:var(--card-fill) padding-box,var(--g-border-strong) border-box} .disco-img{height:150px;position:relative;display:flex;align-items:flex-end;padding:12px} .disco-emoji{position:absolute;top:12px;left:14px;font-size:30px;filter:drop-shadow(0 2px 6px rgba(58,31,48,0.18))} .disco-fav{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;color:var(--mauve);transition:all .15s;box-shadow:var(--shadow-subtle)} .disco-fav:hover{color:var(--pink);transform:scale(1.08)} .disco-fav.on{color:var(--pink)} .disco-tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(58,31,48,0.34);backdrop-filter:blur(4px);padding:5px 10px;border-radius:8px} .disco-body{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1} .disco-name{font-family:var(--serif);font-style:italic;font-weight:500;font-size:21px;color:var(--plum);letter-spacing:-.01em;line-height:1.1} .disco-meta{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:12px;color:var(--mauve);flex-wrap:wrap} .dm-rating{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--plum)} .dm-rating i{font-size:12px;color:var(--gold)} .disco-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--border-strong)} /* literal 3px dot — 50% allowed */ .disco-svcs{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 15px} .disco-svc{font-size:11px;color:var(--mauve);background:var(--surface);padding:5px 10px;border-radius:8px;font-weight:600} .disco-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:10px} .disco-from{font-size:11px;color:var(--mauve)} .disco-from b{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--plum);font-weight:500;display:block;letter-spacing:-.01em} /* booking flow */ .book-grid{display:grid;grid-template-columns:1fr 322px;gap:22px;align-items:start} .stepper{display:flex;align-items:center;margin-bottom:26px} .stepper .st{display:flex;align-items:center;gap:10px} .stepper .st-dot{width:30px;height:30px;border-radius:10px;background:var(--surface);color:var(--mauve);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;flex-shrink:0;border:1.5px solid var(--border-soft);transition:all .2s} .stepper .st-lab{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mauve);white-space:nowrap} .stepper .st-line{flex:1;height:1.5px;background:var(--border-soft);margin:0 12px;border-radius:2px;min-width:18px} .stepper .st.done .st-dot,.stepper .st.active .st-dot{background:var(--gradient-h);color:#fff;border-color:transparent;box-shadow:0 3px 8px rgba(241,102,168,0.25)} .stepper .st.active .st-lab,.stepper .st.done .st-lab{color:var(--plum)} .stepper .st.done .st-line{background:var(--pink)} .opt{display:flex;align-items:center;gap:14px;background:var(--card);border:1.5px solid var(--border-soft);border-radius:14px;padding:15px 17px;cursor:pointer;transition:all .15s;margin-bottom:10px} .opt:hover{border-color:var(--border-strong)} .opt.selected{background:linear-gradient(135deg,var(--soft-pink),rgba(128,146,212,0.10));border-color:var(--purple)} .opt-info{flex:1;min-width:0} .opt-title{font-weight:600;font-size:14px;color:var(--plum)} .opt-sub{font-size:12px;color:var(--mauve);margin-top:3px} .opt-price{font-family:var(--serif);font-style:italic;font-size:20px;font-weight:500;color:var(--plum);letter-spacing:-.01em;white-space:nowrap} .opt-check{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:transparent;flex-shrink:0;transition:all .15s} .opt.selected .opt-check{background:var(--gradient-h);border-color:transparent;color:#fff} .opt-check i{font-size:13px} .daygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:9px;margin-bottom:6px} .day{background:var(--surface);border:1.5px solid transparent;border-radius:13px;padding:12px 6px;text-align:center;cursor:pointer;transition:all .15s} .day:hover{border-color:var(--border)} .day.selected{background:linear-gradient(135deg,var(--soft-pink),rgba(128,146,212,0.12));border-color:var(--purple)} .day.off{opacity:.4;pointer-events:none} .day .d-dow{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mauve)} .day .d-num{font-family:var(--serif);font-style:italic;font-size:23px;font-weight:500;color:var(--plum);margin-top:3px;letter-spacing:-.01em} .day .d-mo{font-size:9px;color:var(--mauve);margin-top:1px;text-transform:uppercase;letter-spacing:.08em;font-weight:600} .slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px} .slot{background:var(--surface);border:1.5px solid transparent;border-radius:11px;padding:11px 8px;text-align:center;font-size:13px;font-weight:600;color:var(--plum);cursor:pointer;transition:all .15s;font-variant-numeric:tabular-nums} .slot:hover{border-color:var(--border)} .slot.selected{background:var(--gradient-h);color:#fff;border-color:transparent;box-shadow:0 3px 8px rgba(241,102,168,0.22)} .slot.off{opacity:.35;pointer-events:none;text-decoration:line-through} /* booking summary rail */ .sumrail{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;overflow:hidden;position:sticky;top:88px} .sumrail-img{height:100px;display:flex;align-items:flex-end;padding:13px} .sr-name{font-family:var(--serif);font-style:italic;font-weight:500;font-size:21px;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(58,31,48,0.35)} .sumrail-body{padding:18px} .sr-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 0;border-top:0.6px solid var(--border-soft);font-size:13px} .sr-row:first-child{border-top:none;padding-top:2px} .sr-k{color:var(--mauve)} .sr-v{color:var(--plum);font-weight:600;text-align:right} .sr-row.total .sr-k{font-weight:700;color:var(--plum)} .sr-row.total .sr-v{font-family:var(--serif);font-style:italic;font-size:22px;font-weight:500;letter-spacing:-.01em} .sr-deposit{background:var(--soft-pink);border-radius:12px;padding:12px 14px;margin:14px 0 4px;font-size:12px;color:#7a4456;line-height:1.5} .sr-deposit b{color:var(--plum);display:block;margin-bottom:2px} /* journey timeline */ .timeline{position:relative;padding-left:30px} .timeline::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:1.5px;background:var(--border)} .tl-item{position:relative;padding-bottom:20px} .tl-item:last-child{padding-bottom:0} .tl-dot{position:absolute;left:-30px;top:1px;width:20px;height:20px;border-radius:6px;background:var(--card);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center} .tl-dot.done{background:var(--gradient-h);border-color:transparent;color:#fff} .tl-dot.done i{font-size:11px} .tl-dot.next{border-color:var(--pink);box-shadow:0 0 0 4px var(--soft-pink)} .tl-when{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mauve);margin-bottom:3px} .tl-title{font-weight:600;font-size:14px;color:var(--plum)} .tl-sub{font-size:12px;color:var(--mauve);margin-top:2px} /* chat / conversation (client messages) */ .chat-wrap{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start} .chat-pane{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;height:564px} .chat-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:0.6px solid var(--border-soft)} .ch-name{font-weight:700;font-size:14px;color:var(--plum)} .ch-sub{font-size:11px;color:var(--green);font-weight:600;margin-top:1px} .chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:9px;background:var(--surface)} .bubble{max-width:74%;padding:11px 14px;border-radius:14px;font-size:13px;line-height:1.5} .bubble.them{background:var(--card);color:var(--plum);align-self:flex-start;border-bottom-left-radius:5px;box-shadow:var(--shadow-subtle)} .bubble.me{background:var(--gradient-h);color:#fff;align-self:flex-end;border-bottom-right-radius:5px} .b-time{font-size:9px;opacity:.65;margin-top:4px;font-family:var(--mono);letter-spacing:.04em} .chat-input{display:flex;gap:8px;padding:13px;border-top:0.6px solid var(--border-soft);align-items:center} .chat-input input{flex:1;background:var(--surface);border:0.6px solid transparent;border-radius:12px;padding:11px 16px;font-size:13px} .chat-input input:focus{outline:none;border-color:var(--border);background:var(--card)} .chat-send{width:40px;height:40px;border-radius:12px;background:var(--gradient-h);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer} .chat-send i{font-size:17px} /* account switcher (extends .avatar-menu) */ .avatar-menu .am-section{font-family:var(--mono);font-size:9px;color:var(--mauve);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px 4px;font-weight:700} .avatar-menu .am-acct{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:10px;text-align:left} .avatar-menu .am-acct:hover{background:var(--surface)} .avatar-menu .am-acct.active{background:linear-gradient(135deg,var(--soft-pink),rgba(128,146,212,0.10))} .avatar-menu .am-acct-info{flex:1;min-width:0} .avatar-menu .am-acct-name{font-weight:600;font-size:13px;color:var(--plum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .avatar-menu .am-acct-sub{font-size:11px;color:var(--mauve);margin-top:1px} .avatar-menu .am-acct > i.ic{color:var(--pink);font-size:16px;flex-shrink:0} .avatar-menu .am-divider{height:0.6px;background:var(--border-soft);margin:6px 4px} /* sign-in page — gradient-bordered card on the washed wall */ .signin-wrap{max-width:412px} .signin-card{border:1.2px solid transparent;background:var(--card-fill) padding-box,var(--g-border) border-box;border-radius:16px;padding:32px 30px 28px;box-shadow:var(--shadow-card)} .signin-aux{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px;font-size:12px} .signin-remember{display:flex;align-items:center;gap:7px;color:var(--mauve);cursor:pointer;font-weight:500} .signin-remember input{width:15px;height:15px;accent-color:#F166A8} .signin-aux a{color:var(--purple);font-weight:600;cursor:pointer} .signin-btn{width:100%;justify-content:center;padding:13px;font-size:14px} .signin-foot{text-align:center;font-size:13px;color:var(--mauve);margin-top:22px;padding-top:20px;border-top:0.6px solid var(--border-soft)} .signin-foot a{color:var(--purple);font-weight:600;cursor:pointer} /* responsive collapse */ @media(max-width:1080px){ .book-grid{grid-template-columns:1fr} .sumrail{position:static} .chat-wrap{grid-template-columns:1fr} } /* mobile sidebar toggle (hamburger) + scrim */ .topbar-burger{display:none;width:38px;height:38px;border-radius:11px;align-items:center;justify-content:center;color:var(--plum);background:none;flex-shrink:0;cursor:pointer} .topbar-burger:hover{background:var(--surface)} .nav-scrim{display:none;position:fixed;inset:56px 0 0 0;background:var(--overlay);z-index:55} .app.nav-open .nav-scrim{display:block} /* === mobile === */ @media(max-width:768px){ .app{grid-template-columns:1fr;grid-template-rows:56px 1fr} .topbar{padding:0 12px;gap:10px} .topbar-burger{display:flex} .topbar-logo{font-size:28px} .topbar-search{display:none} .role-pill{display:none} .sidebar{position:fixed;top:56px;left:0;bottom:0;width:82%;max-width:300px;transform:translateX(-100%);transition:transform .25s ease;z-index:60;height:auto} .app.nav-open .sidebar{transform:translateX(0)} .login{padding:24px 16px} .slayd-logo-lg,.login-logo{font-size:44px} .login-tag{font-size:19px} .signin-wrap{max-width:100%} .book-grid,.chat-wrap,.form-grid,.panel-row{grid-template-columns:1fr !important} .sumrail{position:static} .avatar-menu{right:12px} .kpi-row,.kpi-row.kpi-3{grid-template-columns:1fr 1fr} /* iOS Safari zooms (and stays zoomed) on focusing sub-16px controls; !important beats the (0,2,1) form-row selectors + inline onboarding styles */ input,select,textarea{font-size:16px !important} /* breathing room: 44px side padding left tables/forms 287px on a 375px phone */ .main{padding:24px 16px} /* wide tables scroll inside their card instead of crushing/clipping columns */ .tbl{min-width:560px} .tbl th,.tbl td{padding:12px 14px} /* hours editor: compact tracks proven by the onboarding shim */ .hours-row{grid-template-columns:86px 1fr 1fr 46px 52px;gap:8px;padding:12px 12px} /* steppers: keep only the active step's label so 3 steps fit 375px */ .stepper:not(.ob-stepper) .st:not(.active) .st-lab{display:none} }