:root { --ink:#1a1a1a; --paper:#e8e8e8; --muted:#aaaaaa; --amber:#c6753a; --amber-light:#f0bd74; --line:rgba(232,232,232,.14); }
* { box-sizing:border-box; }
html { min-height:100%; }
body { min-height:100vh; margin:0; color:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at 77% 14%,rgba(198,117,58,.16),transparent 24rem),radial-gradient(circle at 10% 72%,rgba(198,117,58,.07),transparent 30rem),var(--ink); }
a { color:inherit; text-decoration:none; }
.page { min-height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.header,.footer { width:min(1240px,calc(100% - 48px)); margin:0 auto; }
.header { min-height:94px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,201,116,.35); border-radius:14px 14px 17px 17px; font-size:22px; background:linear-gradient(145deg,rgba(232,169,73,.3),rgba(84,55,24,.38)); box-shadow:inset 0 1px rgba(255,239,196,.22),0 10px 30px rgba(0,0,0,.23); }
.brand strong { display:block; font-family:Georgia,"Times New Roman",serif; font-size:24px; letter-spacing:-.5px; }.brand small { display:block; margin-top:2px; color:#7f8a9c; font-size:12px; }
.account { display:flex; align-items:center; gap:10px; color:#c9c9c9; font-size:14px; }.user-avatar { width:34px; height:34px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(240,189,116,.22); border-radius:50%; color:var(--amber-light); background:#302922; font-weight:700; }.user-avatar img { display:block; width:100%; height:100%; object-fit:cover; }.header-link { padding:9px 13px; margin-left:6px; border:1px solid rgba(232,232,232,.17); border-radius:9px; transition:border-color .2s,background .2s; }.header-link:hover { border-color:rgba(198,117,58,.72); background:rgba(198,117,58,.08); }
.main { flex:1; width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:clamp(56px,9vw,115px) 0 64px; }
.welcome { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(350px,.85fr); align-items:center; gap:clamp(44px,8vw,112px); }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 20px; color:#d7a354; font-size:12px; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }.eyebrow span { width:7px; height:7px; border-radius:50%; background:#72d3a1; box-shadow:0 0 0 5px rgba(114,211,161,.12); }
h1 { max-width:630px; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(48px,6.5vw,78px); font-weight:500; line-height:.98; letter-spacing:-.065em; }h1 em { color:var(--amber-light); font-style:italic; }.lead { max-width:540px; margin:28px 0 0; color:#aab1be; font-size:17px; line-height:1.75; }.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:12px 19px; border-radius:9px; font-size:14px; font-weight:750; transition:transform .2s,box-shadow .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { color:#1b160e; background:linear-gradient(135deg,#f6c672,#d98f30); box-shadow:0 12px 30px rgba(186,111,26,.25); }.button-primary:hover { box-shadow:0 15px 34px rgba(220,145,42,.4); }.button-primary span { font-size:19px; line-height:0; }.button-secondary { border:1px solid rgba(245,234,213,.2); color:#d6d6d6; background:rgba(255,255,255,.035); }.button-secondary:hover { background:rgba(255,255,255,.09); }.hint { margin:20px 0 0; color:#687386; font-size:13px; }
.bar-card { position:relative; min-height:332px; overflow:hidden; padding:24px; border:1px solid rgba(198,117,58,.3); border-radius:22px; background:linear-gradient(145deg,rgba(43,42,40,.98),rgba(29,28,27,.96)); box-shadow:0 35px 85px rgba(0,0,0,.32),inset 0 1px rgba(232,232,232,.06); }.bar-card::before { position:absolute; right:28px; bottom:28px; width:82px; height:118px; border:1px solid rgba(240,189,116,.12); border-radius:18px 18px 12px 12px; content:""; }.bar-card::after { position:absolute; right:-50px; bottom:-68px; width:260px; height:190px; border-radius:50%; background:radial-gradient(ellipse,rgba(198,117,58,.26),transparent 67%); content:""; filter:blur(4px); }.bar-glow { position:absolute; inset:0; background:linear-gradient(125deg,transparent 40%,rgba(198,117,58,.1) 100%); pointer-events:none; }.card-topline { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; color:#8d8d8d; font-size:12px; }.open-status { display:inline-flex; align-items:center; gap:7px; color:#e8e8e8; }.open-status i { width:8px; height:8px; border-radius:50%; background:#2e8b57; box-shadow:0 0 0 4px rgba(46,139,87,.11); }
.bartender { position:relative; z-index:1; display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; min-height:172px; gap:16px; padding:32px 4px 18px; }.bartender-avatar { width:62px; height:62px; display:grid; place-items:center; border:1px solid rgba(240,189,116,.4); border-radius:50%; color:var(--amber-light); background:radial-gradient(circle at 34% 28%,rgba(240,189,116,.22),rgba(73,50,29,.62)); box-shadow:0 12px 26px rgba(0,0,0,.26); font-family:Georgia,"Times New Roman",serif; font-size:31px; font-weight:600; }.bartender-role { margin:0 0 4px; color:#c69042; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }.bartender h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:36px; font-weight:500; letter-spacing:-.04em; }.bartender-note { max-width:245px; margin:9px 0 0; color:#aaaaaa; font-size:13px; line-height:1.55; }.counter-message { position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding:15px; border:1px solid rgba(232,232,232,.11); border-radius:14px; color:#d4d4d4; font-size:13px; background:rgba(10,10,10,.32); }.message-icon { color:var(--amber); font-size:18px; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(70px,11vw,130px); }.feature { min-height:184px; padding:24px 22px; border:1px solid rgba(232,232,232,.13); border-radius:18px; background:linear-gradient(145deg,rgba(43,42,40,.75),rgba(29,28,27,.88)); box-shadow:0 14px 34px rgba(0,0,0,.13); }.feature-icon { display:grid; width:32px; height:32px; place-items:center; border:1px solid rgba(198,117,58,.35); border-radius:10px; color:var(--amber-light); background:rgba(198,117,58,.1); font-size:17px; }.feature h2 { margin:22px 0 9px; font-family:Georgia,"Times New Roman",serif; font-size:22px; font-weight:500; letter-spacing:-.02em; }.feature p { margin:0; color:#aaaaaa; font-size:13px; line-height:1.65; }
.footer { display:flex; align-items:center; justify-content:space-between; min-height:72px; border-top:1px solid var(--line); color:#697486; font-size:12px; }.footer span:first-child { color:#b68744; }
@media (max-width:760px) { .header,.footer,.main { width:min(100% - 32px,560px); }.header { min-height:76px; }.brand-mark { width:36px; height:36px; font-size:18px; }.brand strong { font-size:21px; }.brand small,.account-name { display:none; }.header-link { margin-left:0; padding:8px 10px; }.main { padding-top:56px; }.welcome { grid-template-columns:1fr; gap:52px; }h1 { font-size:clamp(45px,14vw,63px); }.lead { font-size:16px; }.bar-card { min-height:342px; }.features { grid-template-columns:1fr; margin-top:70px; gap:12px; }.feature { min-height:0; }.feature h2 { margin-top:17px; }.footer { min-height:62px; }.footer span:last-child { display:none; } }
@media (max-width:390px) { .actions,.button { width:100%; }.button { min-height:50px; }.eyebrow { font-size:10px; }.bar-card { padding:20px; } }