/* POS Design Bible × Mintlify Theme */
:root {
  --bg: #0a0a0a;
  --bg2: #141414;
  --card: rgba(255, 255, 255, 0.03);
  --card2: rgba(255, 255, 255, 0.05);
  --card3: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.1);
  --border2: rgba(255, 255, 255, 0.15);
  --text: #ffffff;
  --text2: #e5e5e5;
  --muted: #a3a3a3;
  --muted2: #737373;
  --fg: #ffffff;
  
  /* Brand Accents */
  --c-blue: #3b82f6; 
  --c-purple: #8b5cf6; 
  --c-teal: #14b8a6; 
  --c-amber: #f59e0b;
  --c-green: #00d4a4; /* Mintlify Primary */
  --c-red: #ef4444; 
  --c-pink: #ec4899; 
  --c-cyan: #06b6d4; 
  --c-orange: #f97316;
  
  --xp-gold: #fbbf24;
  --xp-glow: rgba(251, 191, 36, 0.15);
  
  --badge-purple-bg: rgba(139, 92, 246, 0.15); --badge-purple-text: #ddd6fe;
  --badge-blue-bg: rgba(59, 130, 246, 0.15); --badge-blue-text: #bfdbfe;
  --badge-teal-bg: rgba(20, 184, 166, 0.15); --badge-teal-text: #99f6e4;
  --badge-amber-bg: rgba(245, 158, 11, 0.15); --badge-amber-text: #fde68a;
  --badge-pink-bg: rgba(236, 72, 153, 0.15); --badge-pink-text: #fbcfe8;
  
  --glass: rgba(255, 255, 255, 0.03); 
  --glass-border: rgba(255, 255, 255, 0.1); 
  --glass-hover: rgba(255, 255, 255, 0.06);
  
  --gradient-page: radial-gradient(circle at top right, rgba(0, 212, 164, 0.04), transparent 400px);
  --gradient-morning: radial-gradient(circle at top left, rgba(245, 158, 11, 0.05), transparent 300px);
  --gradient-afternoon: radial-gradient(circle at top left, rgba(59, 130, 246, 0.05), transparent 300px);
  --gradient-night: radial-gradient(circle at top left, rgba(139, 92, 246, 0.05), transparent 300px);
  --gradient-sleep: radial-gradient(circle at top left, rgba(20, 184, 166, 0.05), transparent 300px);
}
[data-theme="light"] {
  --bg: #ffffff;
  --bg2: #f5f5f5;
  --card: #ffffff;
  --card2: #fafafa;
  --card3: #f5f5f5;
  --border: rgba(0, 0, 0, 0.1);
  --border2: rgba(0, 0, 0, 0.15);
  --text: #000000;
  --text2: #262626;
  --muted: #737373;
  --muted2: #a3a3a3;
  --fg: #000000;
  
  --c-blue: #2563eb; 
  --c-purple: #7c3aed; 
  --c-teal: #0d9488; 
  --c-amber: #d97706;
  --c-green: #00d4a4; /* Mintlify Primary */
  --c-red: #dc2626; 
  --c-pink: #db2777; 
  --c-cyan: #0891b2; 
  --c-orange: #ea580c;
  
  --xp-gold: #d97706;
  --xp-glow: rgba(217, 119, 6, 0.1);
  
  --badge-purple-bg: rgba(124, 58, 237, 0.1); --badge-purple-text: #5b21b6;
  --badge-blue-bg: rgba(37, 99, 235, 0.1); --badge-blue-text: #1e3a8a;
  --badge-teal-bg: rgba(13, 148, 136, 0.1); --badge-teal-text: #134e4a;
  --badge-amber-bg: rgba(217, 119, 6, 0.1); --badge-amber-text: #78350f;
  --badge-pink-bg: rgba(219, 39, 119, 0.1); --badge-pink-text: #831843;
  
  --glass: rgba(255, 255, 255, 0.8); 
  --glass-border: rgba(0, 0, 0, 0.1); 
  --glass-hover: rgba(255, 255, 255, 0.95);
  
  --gradient-page: radial-gradient(circle at top right, rgba(0, 212, 164, 0.05), transparent 400px);
  --gradient-morning: radial-gradient(circle at top left, rgba(217, 119, 6, 0.03), transparent 300px);
  --gradient-afternoon: radial-gradient(circle at top left, rgba(37, 99, 235, 0.03), transparent 300px);
  --gradient-night: radial-gradient(circle at top left, rgba(124, 58, 237, 0.03), transparent 300px);
  --gradient-sleep: radial-gradient(circle at top left, rgba(13, 148, 136, 0.03), transparent 300px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:hidden;}body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.5;letter-spacing:-0.01em;min-height:100vh;transition:background .2s,color .2s;overflow-x:hidden;}
.mono {font-family: 'Geist Mono', monospace;}

button{cursor:pointer;font-family:'Inter',sans-serif;}
input,select{font-family:'Inter',sans-serif;}

/* HEADER */
.appheader{position:relative;z-index:1;padding:22px 36px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1600px;margin:0 auto;}
.hdr-greeting{font-size:15px;color:var(--muted);font-weight:400;}
.hdr-title{font-size:26px;font-weight:700;letter-spacing:-.4px;color:var(--text);}
.hdr-right{display:flex;align-items:center;gap:12px;}
.xp-bar-wrap{display:flex;align-items:center;gap:10px;}
/* Was a hardcoded gold background/border (rgba(255,215,0,...), ignoring the --xp-gold token
   entirely) plus a glowing text-shadow — the exact "golden glow" look being replaced. Now a
   flat token-driven badge with no glow, matching the calm neutral theme. */
.xp-level{font-size:13px;font-weight:700;color:var(--xp-gold);background:var(--card2);padding:5px 14px;border-radius:8px;border:1px solid var(--border);white-space:nowrap;transition:transform 150ms cubic-bezier(0.16,1,0.3,1);}
.xp-level:hover{transform:translateY(-1px);}
.xp-track{width:130px;height:8px;border-radius:4px;background:var(--border);overflow:hidden;}
.xp-fill{height:100%;border-radius:4px;background:var(--xp-gold);transition:width .5s ease;}
.xp-text{font-size:12px;color:var(--muted);white-space:nowrap;}
.hdr-av{width:42px;height:42px;border-radius:50%;background:var(--c-teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0;}
.hdr-notes-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:background 150ms cubic-bezier(0.16,1,0.3,1),border-color 150ms cubic-bezier(0.16,1,0.3,1);flex-shrink:0;}.hdr-notes-btn:hover{background:var(--glass-hover);border-color:var(--c-blue);}
.theme-btn{font-size:13px;padding:6px 14px;border-radius:9999px;border:1px solid var(--border);background:transparent;color:var(--text);transition:all .15s;font-weight:500;position:relative;z-index:1;cursor:pointer;}
.theme-btn:hover{background:var(--card2);color:var(--text);border-color:var(--border2);}

/* LAYOUT */
.wrap{max-width:1600px;margin:0 auto;padding:0 36px 80px;position:relative;z-index:1;overflow-x:hidden;}
.content-row{display:flex;gap:24px;align-items:flex-start;}