* { box-sizing: border-box; } /* Theme: set `data-theme` on (see theme-early.js + app.js). All pages load theme-early.js before this file so :root[data-theme] tokens apply to the whole document tree. */ /* Theme tokens for consistent color usage. */ :root { --bg-1: #050816; --bg-2: #0b1430; --surface: rgba(15, 24, 51, 0.72); --surface-strong: rgba(12, 19, 40, 0.88); --surface-elevated: rgba(22, 34, 72, 0.86); --line: rgba(140, 179, 255, 0.28); --primary: #5f8cff; --primary-dark: #3f6df2; --accent: #67f0ff; --text: #e9f0ff; --muted: #9cb0d2; --danger: #ff5f7a; --glow: 0 0 0 1px rgba(111, 144, 255, 0.22), 0 20px 40px rgba(4, 8, 20, 0.55); --header-bg: rgba(8, 13, 29, 0.78); --control-bg: rgba(8, 14, 31, 0.62); --control-bg-soft: rgba(8, 14, 31, 0.45); --control-text: var(--text); --control-placeholder: var(--muted); --date-color-scheme: dark; --bg-accent-corner: #101f47; } html { color: var(--text); min-height: 100%; } body { margin: 0; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--text); background: radial-gradient(circle at 15% 20%, rgba(95, 140, 255, 0.22), transparent 35%), radial-gradient(circle at 80% 10%, rgba(103, 240, 255, 0.16), transparent 32%), radial-gradient(circle at 70% 90%, rgba(128, 94, 255, 0.2), transparent 35%), linear-gradient(160deg, var(--bg-1), var(--bg-2) 60%, var(--bg-accent-corner)); background-attachment: fixed; min-height: 100vh; } :root[data-theme="light"] { --bg-1: #f5f8ff; --bg-2: #e6eefc; --surface: rgba(255, 255, 255, 0.78); --surface-strong: rgba(246, 250, 255, 0.95); --surface-elevated: rgba(238, 245, 255, 0.94); --line: rgba(126, 152, 208, 0.35); --primary: #3f6df2; --primary-dark: #2e57cf; --accent: #2d9fb8; --text: #18233f; --muted: #53658c; --danger: #d63f6a; --glow: 0 0 0 1px rgba(111, 144, 255, 0.16), 0 18px 34px rgba(43, 65, 115, 0.16); --header-bg: rgba(248, 252, 255, 0.88); --control-bg: rgba(236, 243, 255, 0.86); --control-bg-soft: rgba(231, 239, 255, 0.82); --control-text: #1b2948; --control-placeholder: #5a6d96; --date-color-scheme: light; --bg-accent-corner: #dbe7ff; background: radial-gradient(circle at 18% 18%, rgba(95, 140, 255, 0.18), transparent 36%), radial-gradient(circle at 78% 6%, rgba(103, 240, 255, 0.14), transparent 30%), radial-gradient(circle at 75% 92%, rgba(160, 124, 255, 0.16), transparent 34%), linear-gradient(160deg, var(--bg-1), var(--bg-2) 60%, var(--bg-accent-corner)); } :root[data-theme="dark"] { --bg-1: #050816; --bg-2: #0b1430; --surface: rgba(15, 24, 51, 0.72); --surface-strong: rgba(12, 19, 40, 0.88); --surface-elevated: rgba(22, 34, 72, 0.86); --line: rgba(140, 179, 255, 0.28); --primary: #5f8cff; --primary-dark: #3f6df2; --accent: #67f0ff; --text: #e9f0ff; --muted: #9cb0d2; --danger: #ff5f7a; --header-bg: rgba(8, 13, 29, 0.78); --control-bg: rgba(8, 14, 31, 0.62); --control-bg-soft: rgba(8, 14, 31, 0.45); --control-text: #e9f0ff; --control-placeholder: #9cb0d2; --date-color-scheme: dark; --bg-accent-corner: #101f47; } :root[data-theme="meadow"] { --bg-1: #edf8ef; --bg-2: #d8f1df; --surface: rgba(248, 255, 248, 0.78); --surface-strong: rgba(241, 252, 243, 0.95); --surface-elevated: rgba(231, 247, 235, 0.94); --line: rgba(104, 176, 128, 0.34); --primary: #3ea56a; --primary-dark: #2d7e50; --accent: #2f9f73; --text: #163428; --muted: #4f7e67; --danger: #d05074; --glow: 0 0 0 1px rgba(72, 150, 103, 0.16), 0 18px 34px rgba(31, 84, 54, 0.18); --header-bg: rgba(240, 250, 243, 0.9); --control-bg: rgba(230, 246, 235, 0.86); --control-bg-soft: rgba(222, 242, 229, 0.82); --control-text: #173929; --control-placeholder: #4f7e67; --date-color-scheme: light; --bg-accent-corner: #bfe6c9; background: linear-gradient(rgba(237, 250, 240, 0.78), rgba(231, 247, 235, 0.84)), var(--theme-image, url("assets/theme-meadow-placeholder.jpg")), linear-gradient(160deg, var(--bg-1), var(--bg-2) 60%, var(--bg-accent-corner)); background-size: cover; background-position: center; } :root[data-theme="forest"] { --bg-1: #08130f; --bg-2: #112721; --surface: rgba(12, 32, 26, 0.78); --surface-strong: rgba(9, 24, 19, 0.9); --surface-elevated: rgba(18, 44, 34, 0.88); --line: rgba(95, 167, 133, 0.32); --primary: #4bb08a; --primary-dark: #2d7f62; --accent: #83e3c2; --text: #e7fff7; --muted: #9ec7bb; --danger: #ff8ca9; --header-bg: rgba(9, 23, 19, 0.84); --control-bg: rgba(11, 31, 25, 0.74); --control-bg-soft: rgba(14, 35, 28, 0.66); --control-text: #e7fff7; --control-placeholder: #9ec7bb; --date-color-scheme: dark; --bg-accent-corner: #1f4a3b; background: linear-gradient(rgba(4, 12, 9, 0.7), rgba(4, 12, 9, 0.75)), var(--theme-image, url("assets/theme-forest-placeholder.jpg")), linear-gradient(160deg, var(--bg-1), var(--bg-2) 60%, var(--bg-accent-corner)); background-size: cover; background-position: center; } :root[data-theme="twilight"] { --bg-1: #1a0b30; --bg-2: #311347; --surface: rgba(35, 18, 54, 0.75); --surface-strong: rgba(28, 13, 44, 0.9); --surface-elevated: rgba(47, 24, 70, 0.88); --line: rgba(184, 141, 255, 0.34); --primary: #be8dff; --primary-dark: #8f59dd; --accent: #ff9fdd; --text: #f5ebff; --muted: #ccb2ec; --danger: #ff7ca3; --header-bg: rgba(30, 14, 46, 0.82); --control-bg: rgba(34, 17, 52, 0.74); --control-bg-soft: rgba(37, 19, 57, 0.64); --control-text: #f5ebff; --control-placeholder: #ccb2ec; --date-color-scheme: dark; --bg-accent-corner: #5d2c83; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.2; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 30px 30px; } .container { min-height: calc(100vh - 78px); display: flex; align-items: center; justify-content: center; padding: 38px 22px 52px; } .container.container-top { align-items: flex-start; } header.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 32px; background: var(--header-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; } .insite-logo { font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: #f2f6ff; } .row { display: flex; align-items: center; gap: 12px; } .wrap { flex-wrap: wrap; } .top-bar a { text-decoration: none; } .top-bar-actions { display: flex; align-items: center; gap: 12px; } .settings-gear { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 20px; color: var(--text); background: var(--control-bg); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); transition: transform 0.16s ease, border-color 0.2s ease, background-color 0.2s ease; } .settings-gear:hover, .settings-gear:focus-visible { transform: translateY(-1px) rotate(12deg); border-color: var(--primary); background: rgba(95, 140, 255, 0.18); outline: none; } .main-button, .secondary-button, .nav-button { border: 1px solid transparent; border-radius: 12px; padding: 10px 16px; font-weight: 600; cursor: pointer; font-size: 14px; transition: transform 0.16s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .main-button { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #ffffff; box-shadow: 0 8px 20px rgba(71, 113, 247, 0.45); } .main-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(71, 113, 247, 0.55); } .main-button:active { transform: translateY(0); } .main-button:disabled { opacity: 0.7; cursor: not-allowed; } :root[data-theme="light"] .insite-logo, :root[data-theme="meadow"] .insite-logo { color: var(--text); } :root[data-theme="light"] header.top-bar, :root[data-theme="meadow"] header.top-bar { background: rgba(248, 252, 255, 0.88); } :root[data-theme="light"] .settings-gear, :root[data-theme="meadow"] .settings-gear { background: var(--control-bg); } .login-grid { display: grid; gap: 30px; align-content: center; justify-items: center; width: min(880px, 100%); margin-inline: auto; } .login-page.container { min-height: 100vh; align-items: center; justify-content: center; } .login-logo { width: min(760px, 100%); text-align: center; } .login-logo p { margin: 0; font-size: clamp(2.4rem, 9vw, 5.3rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ebf2ff; text-shadow: 0 0 24px rgba(95, 140, 255, 0.55); } .login-tagline { margin: 10px 0 0; color: var(--muted); font-size: 14px; letter-spacing: 0.07em; text-transform: uppercase; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--glow); backdrop-filter: blur(14px); } .login-card { width: min(430px, 100%); padding: 32px 28px; text-align: center; } .login-card h1 { margin: 0 0 10px; font-size: 28px; font-weight: 700; color: var(--text); } .login-subtitle { margin: 0 0 24px; color: var(--muted); font-size: 15px; } .g_id_signin { display: inline-flex; justify-content: center; width: 100%; } .dashboard-placeholder { width: min(920px, 100%); padding: 28px; } .dashboard-placeholder h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2rem); } .dashboard-placeholder p { margin: 0; color: var(--muted); line-height: 1.6; } .placeholder-shell { width: min(920px, 100%); padding: 30px; } .placeholder-shell h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2rem); } .placeholder-shell p { margin: 0; color: var(--muted); line-height: 1.65; } .questionnaire-layout { width: min(1140px, 100%); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 24px; align-items: start; } .questionnaire-form-panel, .questionnaire-history-panel { padding: 24px; } .questionnaire-kicker { margin: 0 0 8px; color: var(--accent); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; } .questionnaire-form-panel h1 { margin: 0 0 10px; font-size: clamp(1.7rem, 3vw, 2.2rem); } .questionnaire-list { display: flex; flex-direction: column; gap: 16px; } .questionnaire-question { padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(8, 14, 31, 0.46); } .questionnaire-question-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .questionnaire-question-header p { margin: 0; font-size: 15px; line-height: 1.55; } .questionnaire-question-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(95, 140, 255, 0.18); color: #ffffff; font-size: 13px; font-weight: 700; flex: 0 0 auto; } .questionnaire-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .questionnaire-option { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 8px; background: rgba(8, 14, 31, 0.35); color: var(--muted); cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease; } .questionnaire-option:hover { border-color: var(--primary); transform: translateY(-1px); } .questionnaire-option.is-selected { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-color: var(--primary); color: #ffffff; } .questionnaire-option-value { font-size: 18px; font-weight: 700; } .questionnaire-option-label { font-size: 11px; } .questionnaire-error { display: none; margin: 14px 0 0; color: var(--danger); font-size: 13px; } .questionnaire-history-panel .history-header { margin-bottom: 16px; } .questionnaire-history-panel .history-header h3 { margin: 0 0 6px; } .questionnaire-history-item { padding: 16px; } .questionnaire-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .questionnaire-metric { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(140, 179, 255, 0.15); } .questionnaire-metric-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; } @media (max-width: 900px) { .questionnaire-layout { grid-template-columns: 1fr; } } .button-row { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; } .mood-slider-block { width: min(860px, 100%); padding: 28px 26px; border-radius: 18px; border: 1px solid var(--line); background: var(--control-bg); } .mood-page { min-height: 100vh; --mood-accent: var(--accent); } .checkin-wrapper { width: 100%; max-width: 920px; display: flex; flex-direction: column; gap: 20px; } .mood-slider-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .mood-slider-label { font-size: 15px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .mood-current-value { font-weight: 700; color: var(--mood-accent); font-size: clamp(1.1rem, 2.4vw, 1.5rem); } .mood-scale-wrap { position: relative; padding-top: 34px; } .mood-indicator { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 14px; padding: 6px 10px; line-height: 1; border-radius: 999px; border: 1px solid var(--line); background: var(--control-bg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28); white-space: nowrap; z-index: 2; min-width: 80px; text-align: center; } .mood-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; background: linear-gradient( to right, #ff5f7a 0%, #ff7f66 16.6%, #ffad5b 33.3%, #ffd166 50%, #9ce36e 66.6%, #5bd6b7 83.3%, #67f0ff 100% ); cursor: pointer; } .mood-slider::-webkit-slider-runnable-track { height: 10px; background: transparent; border-radius: 999px; } .mood-slider::-moz-range-track { height: 10px; background: linear-gradient( to right, #ff5f7a 0%, #ff7f66 16.6%, #ffad5b 33.3%, #ffd166 50%, #9ce36e 66.6%, #5bd6b7 83.3%, #67f0ff 100% ); border: none; border-radius: 999px; } .mood-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -6px; border-radius: 50%; border: 3px solid var(--mood-accent); background: #ffffff; box-shadow: 0 2px 8px rgba(13, 27, 42, 0.35); transition: border-color 0.15s ease; } .mood-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--mood-accent); background: #ffffff; box-shadow: 0 2px 8px rgba(13, 27, 42, 0.35); } .mood-scale-labels { margin-top: 14px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; color: var(--muted); font-size: 12px; } .mood-scale-labels span { text-align: center; transition: color 0.15s ease, transform 0.15s ease; } .mood-scale-labels span.active { color: var(--mood-accent); font-weight: 700; transform: translateY(-1px); } .words-card { padding: 24px; } .words-card h2 { margin: 0 0 6px; font-size: 18px; } .words-card .subtitle { margin: 0 0 16px; color: var(--muted); font-size: 13px; } .category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .cat-tab { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--control-bg-soft); color: var(--muted); cursor: pointer; font-size: 13px; } .cat-tab.active { border-color: var(--primary); color: #eaf1ff; background: rgba(95, 140, 255, 0.24); } .word-grid { display: flex; flex-wrap: wrap; gap: 10px; min-height: 54px; } .word-chip { padding: 8px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--control-bg-soft); color: var(--control-text); font-size: 14px; cursor: pointer; } .word-chip.selected { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-color: transparent; color: #fff; } .word-chip.disabled { opacity: 0.45; pointer-events: none; } .custom-word-row { margin-top: 14px; display: flex; gap: 8px; } .custom-word-row input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--control-bg); color: var(--control-text); } .custom-word-row input::placeholder { color: var(--control-placeholder); } .custom-word-row input:focus { outline: none; border-color: var(--primary); } .custom-word-row button { border: none; border-radius: 10px; padding: 10px 14px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 600; cursor: pointer; } .selected-display { padding: 20px 22px; } .selected-display h3 { margin: 0 0 10px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; } .selected-pills { display: flex; flex-wrap: wrap; gap: 10px; min-height: 36px; align-items: center; } .selected-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(95, 140, 255, 0.25); border: 1px solid rgba(95, 140, 255, 0.38); } .selected-pill button { border: none; background: transparent; color: #fff; cursor: pointer; line-height: 1; } .slot-empty { color: var(--muted); font-size: 13px; font-style: italic; } .slot-counter { margin: 8px 0 0; color: var(--muted); font-size: 13px; } .submit-row { display: flex; align-items: center; gap: 12px; } #submit-btn { flex: 1; } .skip-link { border: none; background: transparent; padding: 0; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; } .success-card { padding: 38px 24px; text-align: center; display: none; } .success-emoji { font-size: 36px; margin-bottom: 8px; } .success-card h2 { margin: 0 0 8px; } .success-card p { margin: 0 0 14px; color: var(--muted); } .success-words { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .success-word-pill { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(95, 140, 255, 0.18); } .history-card { display: none; padding: 22px; } .history-header h3 { margin: 0 0 6px; } #history-meta { margin: 0 0 14px; color: var(--muted); font-size: 13px; } .history-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.02); } .history-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .history-date { color: var(--muted); font-size: 12px; } .history-status { margin: 6px 0; color: var(--muted); font-size: 13px; } @media (max-width: 640px) { .mood-slider-block { padding: 22px 14px; } .mood-slider-label { font-size: 13px; } .mood-scale-labels { font-size: 10px; } .submit-row { flex-direction: column; align-items: stretch; } .questionnaire-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); } .questionnaire-entry-grid { grid-template-columns: 1fr; } } .checkin-page-layout { width: min(1100px, 100%); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 24px; align-items: start; } .checkin-history-panel { padding: 24px; } .checkin-history-panel h2 { margin: 0 0 4px; font-size: 18px; } .journal-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: start; width: 100%; max-width: 1040px; } .journal-sidebar { display: flex; flex-direction: column; gap: 24px; } .entry-form { padding: 24px; } .entry-form h2, .entries-panel h2, .gemini-drawer h2 { margin: 0 0 16px; font-size: 18px; } .panel-subtitle { margin: -6px 0 16px; color: var(--muted); font-size: 14px; line-height: 1.55; } .entry-form input, .entry-form textarea, .gemini-drawer textarea, .username-card input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 14px; font-family: inherit; color: var(--control-text); background: var(--control-bg); box-sizing: border-box; margin-bottom: 12px; resize: vertical; } .entry-form textarea { min-height: 150px; } .entry-form input:focus, .entry-form textarea:focus, .gemini-drawer textarea:focus, .username-card input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(95, 140, 255, 0.18); } .entry-form input::placeholder, .entry-form textarea::placeholder, .username-card input::placeholder, .search-bar-row input[type="text"]::placeholder { color: var(--control-placeholder); } .full-width { width: 100%; } .entries-panel { padding: 24px; } .ai-response-shell { margin-top: 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--control-bg-soft); } .ai-response-placeholder, .ai-response-text, .ai-response-error { margin: 0; font-size: 14px; line-height: 1.65; } .ai-response-placeholder { color: var(--muted); } .ai-response-text { color: var(--text); white-space: pre-wrap; } .ai-response-error { color: #ffd7dd; } .gemini-tab { position: fixed; top: 152px; right: 0; z-index: 42; display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-width: 72px; padding: 18px 16px 18px 18px; border: 1px solid var(--line); border-right: none; border-radius: 18px 0 0 18px; background: linear-gradient(180deg, var(--primary), var(--primary-dark)); color: #ffffff; box-shadow: 0 14px 28px rgba(4, 10, 28, 0.34); cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, right 0.28s ease; } .gemini-tab:hover { box-shadow: 0 16px 30px rgba(4, 10, 28, 0.4); } .gemini-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; line-height: 1.2; font-weight: 700; } .gemini-tab-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 14px rgba(103, 240, 255, 0.9); } .gemini-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(2, 7, 17, 0.44); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.24s ease; } .gemini-drawer { position: fixed; top: 98px; right: 18px; bottom: 18px; z-index: 40; width: min(420px, calc(100vw - 32px)); padding: 24px; display: flex; flex-direction: column; overflow-y: auto; opacity: 0; pointer-events: none; transform: translateX(calc(100% + 28px)); transition: transform 0.28s ease, opacity 0.22s ease; } .gemini-drawer textarea { min-height: 132px; margin-bottom: 12px; resize: vertical; } .gemini-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .gemini-kicker { margin: 0 0 6px; color: var(--accent); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; } .gemini-close { border: 1px solid var(--line); border-radius: 10px; background: var(--control-bg); color: var(--muted); width: 36px; height: 36px; font-size: 22px; line-height: 1; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .gemini-close:hover { color: var(--text); background: var(--control-bg-soft); border-color: var(--primary); } body.gemini-open .gemini-backdrop { opacity: 1; pointer-events: auto; } body.gemini-open .gemini-drawer { opacity: 1; pointer-events: auto; transform: translateX(0); } body.gemini-open .gemini-tab { right: calc(min(420px, calc(100vw - 32px)) + 18px); } .entries-list { display: flex; flex-direction: column; gap: 16px; } .entry-card { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; } .entry-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .entry-card h3 { margin: 0; font-size: 16px; font-weight: 600; } .entry-meta { display: flex; align-items: center; gap: 8px; } .entry-date { font-size: 12px; color: var(--muted); white-space: nowrap; } .entry-content { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text); white-space: pre-wrap; } .delete-btn { background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--muted); font-size: 18px; padding: 1px 6px; line-height: 1; border-radius: 8px; } .delete-btn:hover { color: #ffd7dd; background: rgba(255, 95, 122, 0.18); border-color: rgba(255, 95, 122, 0.38); } .search-bar-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .search-bar-row input[type="text"] { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; font-size: 14px; font-family: inherit; color: var(--control-text); background: var(--control-bg); box-sizing: border-box; } .search-bar-row input[type="text"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(95, 140, 255, 0.18); } .date-filter-row { display: flex; align-items: center; gap: 8px; } .date-filter-row input[type="date"] { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-size: 13px; font-family: inherit; color: var(--control-text); background: var(--control-bg); color-scheme: var(--date-color-scheme); } .date-filter-row input[type="date"]:focus { outline: none; border-color: var(--primary); } .date-sep { color: var(--muted); font-size: 14px; } mark { background: rgba(95, 140, 255, 0.35); color: #ffffff; border-radius: 3px; padding: 0 2px; } .empty-state { color: var(--muted); font-size: 14px; text-align: center; padding: 40px 0; } .username-overlay { position: fixed; inset: 0; background: rgba(2, 7, 17, 0.66); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); } .username-card { width: min(390px, 90vw); padding: 30px 26px; text-align: center; } .username-card h2 { margin: 0 0 8px; font-size: 22px; } .username-card p { color: var(--muted); font-size: 14px; margin: 0 0 20px; } .settings-shell { width: min(920px, 100%); padding: 30px; } .settings-shell h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.4rem); } .settings-shell p { margin: 0; color: var(--muted); line-height: 1.65; } .theme-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .theme-option { border: 1px solid var(--line); border-radius: 16px; padding: 18px; text-align: left; color: var(--text); background: var(--control-bg-soft); cursor: pointer; transition: border-color 0.2s ease, transform 0.16s ease; } .theme-option:hover { transform: translateY(-1px); border-color: var(--primary); } .theme-option.active { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(95, 140, 255, 0.32) inset; } .theme-swatch { height: 84px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); margin-bottom: 12px; } .theme-option h3 { margin: 0 0 6px; } .theme-option p { font-size: 13px; } .swatch-light { background: linear-gradient(135deg, #f8fbff, #eaf2ff, #dfe9fc); } .swatch-dark { background: linear-gradient(135deg, #5f8cff, #67f0ff, #8f59dd); } .swatch-meadow { background: linear-gradient(rgba(236, 249, 239, 0.62), rgba(227, 245, 233, 0.7)), url("assets/theme-meadow-placeholder.jpg"), linear-gradient(140deg, #9be2b6, #4c9f73); background-size: cover; background-position: center; } .swatch-forest { background: linear-gradient(rgba(8, 16, 12, 0.5), rgba(8, 16, 12, 0.6)), url("assets/theme-forest-placeholder.jpg"), linear-gradient(140deg, #3f9072, #173428); background-size: cover; background-position: center; } .swatch-twilight { background: linear-gradient(140deg, #be8dff, #8f59dd, #ff9fdd); } @media (max-width: 800px) { header.top-bar { padding: 15px 16px; flex-direction: column; align-items: stretch; } .top-bar .row { justify-content: center; } .top-bar-actions { justify-content: center; } } @media (max-width: 640px) { .container { padding: 24px 14px 40px; } .questionnaire-layout { grid-template-columns: 1fr; } .checkin-page-layout { grid-template-columns: 1fr; } .journal-layout { grid-template-columns: 1fr; } .gemini-tab { top: auto; right: 16px; bottom: 18px; min-width: 0; border-right: 1px solid var(--line); border-radius: 999px; padding: 12px 16px; } .gemini-tab:hover { transform: none; } .gemini-tab-label { writing-mode: initial; transform: none; font-size: 12px; } .gemini-drawer { top: auto; right: 14px; bottom: 72px; left: 14px; width: auto; max-height: calc(100vh - 128px); } body.gemini-open .gemini-tab { right: 16px; } .theme-grid { grid-template-columns: 1fr; } }