/* =============== MOBILE‑FIRST NEUBRUTALIST THEME (Sharp corners) + Multi‑palette =============== */ :root{ --appbar-h: 120px; /* Conservative estimate for mobile app bar height including padding/borders */ --dock-h: 72px; --dock-w: 72px; --bg:#fdfdfc; --fg:#111; --card:#ffffff; --border:#111; --accent:#1f6feb; /* blue */ --accent-2:#f5b700;/* yellow */ --accent-3:#d7263d;/* red */ --muted:#555; --shadow:2px 2px 0 var(--border); --radius:0; --ring:2px solid var(--border); --btn-text:#111; } /* THEMES (set via ) */ /* Light Mode Themes */ :root[data-theme="blue"]{ --bg:#fdfdfc; --fg:#111; --card:#ffffff; --border:#111; --accent:#1f6feb; --accent-2:#f5b700; --accent-3:#d7263d; --muted:#575757; --btn-text:#111; } :root[data-theme="mint"]{ --bg:#fbfffc; --fg:#0d0f0e; --card:#ffffff; --border:#0d0f0e; --accent:#0aa574; --accent-2:#ffe17a; --accent-3:#ed4b4b; --muted:#4e5a55; --btn-text:#0d0f0e; } :root[data-theme="peach"]{ --bg:#fffaf7; --fg:#14110f; --card:#ffffff; --border:#14110f; --accent:#ff6a55; --accent-2:#ffd166; --accent-3:#304ffe; --muted:#5a5451; --btn-text:#14110f; } :root[data-theme="grape"]{ --bg:#fbf8ff; --fg:#100b18; --card:#ffffff; --border:#100b18; --accent:#6a38f0; --accent-2:#ffcd39; --accent-3:#e9427a; --muted:#5b5363; --btn-text:#100b18; } :root[data-theme="slate"]{ --bg:#fafbfc; --fg:#0e141b; --card:#ffffff; --border:#0e141b; --accent:#0ea5e9; --accent-2:#84cc16; --accent-3:#ef4444; --muted:#586575; --btn-text:#0e141b; } :root[data-theme="sand"]{ --bg:#fffdf7; --fg:#14120f; --card:#ffffff; --border:#14120f; --accent:#0077b6; --accent-2:#ffb703; --accent-3:#e85d04; --muted:#625c52; --btn-text:#14120f; } /* Dark Mode Themes */ :root[data-theme="blue-dark"]{ --bg:#0a0a0a; --fg:#f4f4f4; --card:#1a1a1a; --border:#f4f4f4; --accent:#4dabf7; --accent-2:#ffd54f; --accent-3:#ff6b6b; --muted:#bcbcbc; --btn-text:#f4f4f4; } :root[data-theme="mint-dark"]{ --bg:#0a0f0d; --fg:#e8f5ee; --card:#162420; --border:#e8f5ee; --accent:#10d699; --accent-2:#ffe17a; --accent-3:#ff6b6b; --muted:#a8c4b5; --btn-text:#e8f5ee; } :root[data-theme="peach-dark"]{ --bg:#0f0a08; --fg:#fff4ed; --card:#1f1612; --border:#fff4ed; --accent:#ff8a6b; --accent-2:#ffd166; --accent-3:#6b7fff; --muted:#c4a89c; --btn-text:#fff4ed; } :root[data-theme="grape-dark"]{ --bg:#0d0814; --fg:#f2edff; --card:#1a1424; --border:#f2edff; --accent:#8b5cff; --accent-2:#ffe17a; --accent-3:#ff6b9d; --muted:#b8a4c4; --btn-text:#f2edff; } :root[data-theme="slate-dark"]{ --bg:#0a0f14; --fg:#e8f0f7; --card:#14212e; --border:#e8f0f7; --accent:#38bdf8; --accent-2:#a3e635; --accent-3:#ff6b6b; --muted:#a3b8c9; --btn-text:#e8f0f7; } :root[data-theme="sand-dark"]{ --bg:#0f0d08; --fg:#fffcf4; --card:#1f1a12; --border:#fffcf4; --accent:#0096c7; --accent-2:#ffc300; --accent-3:#ff9505; --muted:#c4b89a; --btn-text:#fffcf4; } @media (prefers-color-scheme: dark){ :root{ --bg:#121212; --fg:#f4f4f4; --card:#1a1a1a; --border:#f4f4f4; --accent:#4dabf7; --accent-2:#ffd54f; --accent-3:#ff6b6b; --muted:#bcbcbc; } } *{box-sizing:border-box} html,body{height:100%} body{margin:0; background:var(--bg); color:var(--fg); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; line-height:1.3;} a{color:inherit; text-decoration:none} img{max-width:100%; display:block} /* Utility */ .grid{display:grid} .row{display:flex} .wrap{flex-wrap:wrap} .gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-4{gap:1rem} .p-2{padding:.5rem} .p-3{padding:.75rem} .p-4{padding:1rem} .px-4{padding-left:1rem; padding-right:1rem} .py-3{padding-top:.75rem; padding-bottom:.75rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} .mt-5{margin-top:1.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem} .w-full{width:100%} /* Header */ .appbar{ position:fixed; top:0; left: 0; right: 0; z-index:100; background:var(--card); opacity: 1; border:1px solid var(--border); border-left:none; border-right:none; box-shadow: var(--shadow); } .brand{display:flex; align-items:center; gap:.6rem; font-weight:900; letter-spacing:.2px; padding:.65rem 1rem; font-family: "JetBrains Mono", monospace; text-transform:uppercase;} .brand .logo{height:34px; width:34px; border:1px solid var(--border); display:grid; place-items:center; background:var(--accent-2); box-shadow: var(--shadow); font-weight:800;} .app-actions{margin-left:auto; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap} .pill{border:1px solid var(--border); padding:.45rem .8rem; font-weight:800; background:var(--bg); color:var(--btn-text); box-shadow:var(--shadow);} .pill:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--border)} /* Sliding theme toggle switch */ .theme-toggle-switch{ position:relative; width:3.5rem; height:1.8rem; border:2px solid var(--border); background:var(--card); cursor:pointer; box-shadow:var(--shadow); transition:background 0.3s ease, transform 0.1s ease; padding:0; overflow:hidden; } .theme-toggle-switch:hover{ background:var(--accent-2); } .theme-toggle-switch:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--border); } .theme-switch-slider{ position:absolute; top:0; left:0; width:1.4rem; height:100%; background:var(--accent); border-right:2px solid var(--border); display:flex; align-items:center; justify-content:center; transition:left 0.3s ease; } .theme-toggle-switch.dark .theme-switch-slider{ left:calc(100% - 1.4rem); border-right:none; border-left:2px solid var(--border); } .theme-switch-icon{ font-size:1rem; line-height:1; display:block; } /* Dashboard shell */ .shell{ min-height:100dvh; padding-top: 0; /* No padding - .view handles app bar clearance */ padding-bottom: calc(var(--dock-h) + 1rem); /* Add 1rem gap above dock */ } /* View wrapper - handles app bar clearance for ALL views */ .view{ padding-top: calc(var(--appbar-h) + 0.5rem); /* App bar clearance + 0.5rem gap */ } /* History view - specific styles for history page */ .history{ min-height: 100%; overflow-y: auto; padding-bottom: calc(var(--dock-h) + 1rem); /* Add space for mobile dock */ } /* Cards */ .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);} .card h2{margin:0; font-size:1rem; font-weight:900; letter-spacing:.3px; text-transform:uppercase; font-family:"JetBrains Mono",monospace} .card h3{margin:0; font-size:.95rem; font-weight:900; letter-spacing:.2px; text-transform:uppercase; font-family:"JetBrains Mono",monospace} .card .toolbar{display:flex; gap:.5rem} .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:900; font-family:"JetBrains Mono",monospace; text-transform:uppercase; border:1px solid var(--border); background:var(--bg); color:var(--btn-text); padding:.55rem .8rem; border-radius:0; box-shadow:var(--shadow); cursor:pointer} .btn[aria-pressed="true"], .btn.primary{background:var(--accent); color:#fff} .btn.warn{background:var(--accent-3); color:#fff} .btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--border)} /* Form inputs - neubrutalist styling */ .input, .select{ width:100%; display:block; padding:.65rem .8rem; font-size:.95rem; font-family:inherit; color:var(--fg); background:var(--card); border:2px solid var(--border); border-radius:0; box-shadow:var(--shadow); outline:none; appearance:none; font-weight:600; } .input:focus, .select:focus{ border-width:3px; box-shadow:3px 3px 0 var(--border); } .input[type="number"]{ font-family:"JetBrains Mono",monospace; font-weight:700; } .input[type="date"]{ font-family:"JetBrains Mono",monospace; font-weight:700; } .select{ cursor:pointer; font-family:"JetBrains Mono",monospace; font-weight:700; text-transform:uppercase; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .65rem center; background-size:20px; padding-right:2.5rem; } .card label{ display:block; font-weight:800; font-size:.85rem; font-family:"JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.3px; color:var(--fg); } /* Progress bars */ .bar{position:relative; height:18px; border:1px solid var(--border); border-radius:0; background:var(--bg); box-shadow:var(--shadow); overflow:hidden} .bar > span{display:block; height:100%; background:var(--accent);} .bar .tick{position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0 48px, rgba(0,0,0,.08) 48px, rgba(0,0,0,.08) 52px)} .bar-overflow{border-color:var(--accent-3); border-width:2px} .bar-overflow > span{background:var(--accent-3)} /* Sections */ .section{display:grid; gap:1rem} /* Meals list */ .meal{display:grid; grid-template-columns:1fr auto; align-items:start; gap:.25rem} .meal h3{margin:0; font-weight:900; font-size:1rem} .meta{font-size:.85rem; color:var(--muted);} .grid .card .meta { margin-top: 0.5rem; } /* Sticky bottom nav - base styles */ .dock{ background:var(--card); gap:.5rem; padding:.65rem; } /* Mobile dock - fixed at bottom */ .dock-mobile{ position:fixed; bottom: 0; top: auto; border-bottom: none; inset:auto 0 0 0; z-index: 100; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--border); box-shadow:0 -2px 0 0 var(--border); } /* Hide desktop dock on mobile */ .dock-desktop{ display: none; } /* Shared button base styles for all docks */ .dock .dock-btn{ display: flex; border: 1px solid var(--border); border-radius: 0; background: var(--bg); color: var(--btn-text); box-shadow: var(--shadow); font-weight: 900; font-family: "JetBrains Mono", monospace; text-transform: uppercase; } /* Shared button states for all docks */ .dock .dock-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--border)} .dock .dock-btn.selected{background:var(--accent); color:var(--card); border-color:var(--border);} .dock .dock-btn:disabled{ opacity: 0.5; cursor: not-allowed; pointer-events: none; position: relative; } .dock .dock-btn:disabled::after{ content: "Coming Soon"; position: absolute; top: -8px; right: -8px; background: var(--accent-2); color: var(--border); font-size: 0.6rem; padding: 2px 6px; border: 2px solid var(--border); box-shadow: 2px 2px 0 var(--border); font-weight: 900; white-space: nowrap; transform: rotate(12deg); } /* Mobile-specific button styles */ .dock-mobile .dock-btn{ flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: .55rem .4rem; font-size: .72rem; } /* Layout — mobile first */ .container{display:grid; gap:1rem; padding:0 1rem 1rem 1rem} /* No top padding - shell handles app bar clearance */ /* Content container with margins for header/dock clearance */ .content-container{ /* No margin-top needed - .view handles app bar clearance */ padding-bottom: calc(var(--dock-h) + 1rem); } /* Desktop+ */ @media (min-width: 900px){ .container{grid-template-columns: 1.25fr .75fr; align-items:start; padding:0 1.25rem 1.25rem 1.25rem; gap:1.25rem;} /* No top padding on desktop either */ .content-container{ margin-top: calc(var(--appbar-h) + 1.25rem); margin-bottom: 0; } .section.grid-2{grid-template-columns:1fr 1fr} .shell{ padding-top: calc(var(--appbar-h) + 1.25rem); padding-bottom: 2rem; } /* Hide mobile dock on desktop */ .dock-mobile{ display: none; } /* Show desktop dock in document flow */ .dock-desktop{ display: flex; position: static; flex-direction: column; border: 3px solid var(--border); border-radius: 0; box-shadow: var(--shadow); margin-bottom: 1rem; } /* Desktop-specific button styles */ .dock-desktop .dock-btn{ flex-direction: row; justify-content: flex-start; align-items: center; font-size: .8rem; padding: .65rem; text-align: left; } } /* Demo helper styles */ .ghost{opacity:.65} .chip{display:inline-block; border:1px solid var(--border); padding:.2rem .5rem; font-weight:800; font-size:.72rem; font-family:"JetBrains Mono",monospace; background:var(--accent-2); box-shadow:var(--shadow)} /* Theme indicator badge */ .theme-badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border:2px solid var(--border); background:var(--accent); color:#fff; font-weight:900; font-size:.7rem; font-family:"JetBrains Mono",monospace; text-transform:uppercase; box-shadow:var(--shadow); cursor:pointer; transition:all 0.1s ease; } .theme-badge:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--border); } /* Enhanced buttons */ .btn-lg{ font-size:1rem; padding:.7rem 1rem; } .btn-sm{ font-size:.7rem; padding:.4rem .6rem; } /* Grid layouts */ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} /* Micro stats display */ .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.75rem; } .stat-card{ padding:.75rem; border:2px solid var(--border); background:var(--card); box-shadow:var(--shadow); } .stat-card .stat-label{ font-size:.72rem; font-weight:800; color:var(--muted); text-transform:uppercase; font-family:"JetBrains Mono",monospace; margin-bottom:.3rem; } .stat-card .stat-value{ font-size:1.5rem; font-weight:900; color:var(--fg); font-family:"JetBrains Mono",monospace; } .stat-card .stat-unit{ font-size:.85rem; color:var(--muted); font-weight:600; } /* Ratio badge */ .ratio-badge{ display:inline-block; padding:.25rem .5rem; border:2px solid var(--border); background:var(--accent-2); font-weight:900; font-size:.7rem; font-family:"JetBrains Mono",monospace; box-shadow:var(--shadow); } .ratio-badge.good{background:var(--accent-2)} .ratio-badge.warning{background:var(--accent-3)} /* Section headers */ .section-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-bottom:.75rem; } /* Calendar styles */ .calendar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; z-index: 200; padding: 1rem; } .calendar-modal { max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; } .calendar-grid.calendar-week { gap: 0.75rem; } .calendar-day-header { text-align: center; padding: 0.5rem; font-weight: 900; font-family: "JetBrains Mono", monospace; text-transform: uppercase; font-size: 0.75rem; } .calendar-day { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--border); background: var(--card); box-shadow: var(--shadow); cursor: pointer; font-weight: 700; transition: transform 0.1s ease; } .calendar-day:hover { background: var(--accent-2); } .calendar-day:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border); } .calendar-day.calendar-day-empty { border: none; background: transparent; box-shadow: none; cursor: default; } .calendar-day.is-today { background: var(--accent); color: #fff; font-weight: 900; } .calendar-day.is-selected { border-color: var(--accent); border-width: 3px; } .calendar-day.has-log { background: var(--accent-2); } .calendar-day.has-log.is-today { background: var(--accent); } .calendar-day .day-number { font-size: 1rem; line-height: 1; } .calendar-day .log-indicator { position: absolute; bottom: 0.25rem; right: 0.25rem; font-size: 0.5rem; color: var(--accent); } .calendar-year-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; } .calendar-year-month { text-align: center; transition: transform 0.1s ease; } .calendar-year-month:hover { transform: scale(1.05); } .calendar-year-month.is-current { border-color: var(--accent); border-width: 2px; } .calendar-year-month h4 { margin: 0 0 0.5rem 0; font-size: 0.9rem; font-weight: 900; font-family: "JetBrains Mono", monospace; text-transform: uppercase; } /* Responsive text */ @media (max-width: 600px){ .card h2{font-size:.9rem} .stat-card .stat-value{font-size:1.2rem} /* App bar mobile adjustments */ .appbar .row{ padding-left: .75rem; padding-right: .75rem; gap: .5rem; } .brand{ padding: .5rem .75rem; gap: .4rem; font-size: .85rem; } .app-actions{ gap: .4rem; justify-content: flex-end; } .pill{ padding: .4rem .65rem; font-size: .75rem; } .theme-toggle-switch{ width: 3rem; height: 1.6rem; } .theme-switch-slider{ width: 1.2rem; } .theme-toggle-switch.dark .theme-switch-slider{ left: calc(100% - 1.2rem); } .calendar-modal { max-height: 95vh; } .calendar-day { font-size: 0.875rem; } .calendar-day .day-number { font-size: 0.875rem; } .calendar-year-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } } /* =============== PRINT STYLES FOR PDF GENERATION =============== */ @media print { /* Reset page margins and setup */ @page { size: letter portrait; margin: 0.3in 0.4in; } /* Hide all non-essential elements */ body > *:not(.container) { display: none !important; } .appbar, .dock, .footer, button, .btn, .pill, .app-actions, .theme-toggle-switch { display: none !important; } /* Optimize container for print */ body { background: white !important; color: black !important; margin: 0 !important; padding: 0 !important; } .container { border: none !important; height: auto !important; width: 100% !important; display: block !important; padding: 0 !important; margin: 0 !important; } .content-container { padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* Optimize card layout for single page */ #detailed-micro-report { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; page-break-inside: avoid; position: relative; top: 0; } /* Hide the button row entirely */ #detailed-micro-report > .row { display: none !important; } /* Hide the main title - we have header */ #detailed-micro-report h2 { display: none !important; } /* Hide the main description - save space */ #detailed-micro-report > .meta { display: none !important; } /* Section headers */ #detailed-micro-report h3 { font-size: 0.7rem !important; margin: 0.2rem 0 0.08rem 0 !important; padding: 0.08rem 0.2rem; background: black !important; color: white !important; border: none !important; text-transform: uppercase; letter-spacing: 0.2px; } /* Hide section descriptions to save space */ #detailed-micro-report h3 + .meta { display: none !important; } /* Hide section spacing divs */ #detailed-micro-report .mt-4, #detailed-micro-report .mt-3 { margin-top: 0 !important; } /* Compact grid layouts */ #detailed-micro-report .grid { gap: 0.2rem !important; display: grid; grid-template-columns: repeat(2, 1fr); } /* Optimize ratio cards */ #detailed-micro-report .card { border: 1px solid #333 !important; box-shadow: none !important; padding: 0.2rem !important; background: white !important; page-break-inside: avoid; margin: 0 !important; } #detailed-micro-report .card strong { font-size: 0.6rem !important; font-weight: 900; } #detailed-micro-report .chip { font-size: 0.55rem !important; padding: 0.1rem 0.25rem !important; background: #f0f0f0 !important; border: 1px solid #333 !important; box-shadow: none !important; } #detailed-micro-report .card .row { margin-bottom: 0.08rem; } /* Optimize progress bars for print */ #detailed-micro-report .bar { height: 7px !important; margin: 0.08rem 0 !important; border: 1px solid #333 !important; box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } #detailed-micro-report .bar > span { -webkit-print-color-adjust: exact; print-color-adjust: exact; } #detailed-micro-report .bar .tick { opacity: 0.3; } /* Compact descriptions */ #detailed-micro-report .card .meta { font-size: 0.42rem !important; margin: 0.08rem 0 0 0 !important; line-height: 1.05; color: #555 !important; } #detailed-micro-report .card span:not(.chip):not([style*="width"]) { font-size: 0.55rem !important; } /* Hide the footer info card */ #detailed-micro-report > .mt-4.card[style*="background"] { display: none !important; } /* Add professional PDF header */ #detailed-micro-report::before { content: "Bioenergetic Nutrition Analysis • Detailed Micronutrient Report"; display: block; text-align: center; font-size: 0.75rem; font-weight: 700; color: #000; margin: 0 0 0.2rem 0; padding: 0 0 0.15rem 0; border-bottom: 2px solid black; } /* Add footer with date */ #detailed-micro-report::after { content: "Generated: " attr(data-date) " • For healthcare provider/coach consultation"; display: block; text-align: center; font-size: 0.5rem; color: #888; margin: 0.15rem 0 0 0; padding: 0.12rem 0 0 0; border-top: 1px solid #ddd; } /* Ensure no page breaks in critical sections */ .grid, .card { page-break-inside: avoid; break-inside: avoid; } /* Force all colors to print */ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* =============== SETTINGS PAGE STYLES =============== */ .settings-page { width: 100%; overflow-y: auto; } .settings-main { max-width: 900px; margin: 0 auto; padding: 1.5rem; } .page-title { font-size: 2rem; font-weight: 900; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.5px; } .settings-section { margin-bottom: 2rem; } .section-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.3px; } /* Alerts */ .alert { padding: 1rem; margin-bottom: 1rem; border: 3px solid var(--border); box-shadow: var(--shadow); font-weight: 600; } .alert-success { background: var(--accent-2); color: var(--btn-text); } .alert-error { background: var(--accent-3); color: white; } /* Forms */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.3px; } .form-input { width: 100%; padding: 0.75rem; border: 3px solid var(--border); background: var(--bg); color: var(--fg); font-size: 1rem; font-weight: 500; box-shadow: var(--shadow); font-family: inherit; } .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); } .form-input:disabled { opacity: 0.5; cursor: not-allowed; } .form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 600px) { .form-grid { grid-template-columns: repeat(2, 1fr); } } /* Info display */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .info-item { display: flex; flex-direction: column; gap: 0.25rem; } .info-label { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.3px; } .info-value { font-weight: 600; font-size: 1.1rem; } /* Preferences */ .preference-item { display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 600px) { .preference-item { flex-direction: row; justify-content: space-between; align-items: center; } } /* Data actions */ .data-action { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 600px) { .data-action { flex-direction: row; justify-content: space-between; align-items: center; } } .action-title { font-size: 1rem; font-weight: 800; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.2px; } .action-description { font-size: 0.9rem; color: var(--muted); margin: 0; } /* Security section */ .security-item { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 600px) { .security-item { flex-direction: row; justify-content: space-between; align-items: center; } } /* Danger zone */ .danger-zone .section-title { color: var(--accent-3); } .card-danger { border-color: var(--accent-3) !important; border-width: 3px !important; } /* Buttons */ .btn { padding: 0.75rem 1.5rem; border: 3px solid var(--border); background: var(--card); color: var(--btn-text); font-weight: 800; font-size: 0.95rem; cursor: pointer; box-shadow: var(--shadow); text-transform: uppercase; letter-spacing: 0.3px; transition: transform 0.1s ease; } .btn:hover:not(:disabled) { background: var(--accent-2); } .btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: white; } .btn-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); } .btn-secondary { background: var(--accent-2); } .btn-danger { background: var(--accent-3); color: white; border-color: var(--accent-3); } .btn-danger:hover:not(:disabled) { background: var(--accent-3); filter: brightness(1.1); } /* Confirmation actions */ .confirmation-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .loading { text-align: center; padding: 2rem; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; }