.reader-top-actions { display:flex; align-items:flex-start; gap:9px; }.bookmark-button { width:36px; height:36px; border:1px solid var(--line); border-radius:10px; color:var(--accent); background:var(--card); font-size:1.15rem; transition:.2s ease; }.bookmark-button:hover,.bookmark-button.saved { color:#fff; border-color:var(--accent); background:var(--accent); }.feature-hub { max-width:var(--platform-max); margin:0 auto; display:grid; grid-template-columns:.75fr 1.25fr; gap:52px; padding:78px 0 92px; border-top:1px solid var(--line); }.feature-hub-heading h2 { margin:10px 0 13px; font:500 2.7rem/.96 "Fraunces",Georgia,serif; letter-spacing:-.06em; }.feature-hub-heading h2 em { color:var(--accent-deep); font-style:normal; }.feature-hub-heading p { max-width:280px; color:var(--muted); font-size:.78rem; line-height:1.7; }.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.feature-tile { min-height:145px; position:relative; padding:17px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:rgba(255,253,248,.72); text-align:left; transition:.2s ease; }.feature-tile:hover { border-color:var(--line-strong); background:var(--card); box-shadow:0 12px 28px rgba(40,45,35,.07); transform:translateY(-2px); }.feature-icon { width:31px; height:31px; display:grid; place-items:center; margin-bottom:16px; border-radius:9px; font-size:1rem; }.feature-icon.coral { color:#fff; background:var(--accent); }.feature-icon.sage { color:#fff; background:var(--sage-deep); }.feature-icon.gold { color:#59451d; background:#f5c684; }.feature-icon.violet { color:#fff; background:var(--violet); }.feature-tile strong,.feature-tile small { display:block; }.feature-tile strong { font-size:.76rem; }.feature-tile small { margin-top:4px; color:var(--muted); font-size:.62rem; }.tile-arrow { position:absolute; top:17px; right:17px; color:var(--accent); font-size:1rem; }.profile-modal { width:min(590px,100%); max-height:88vh; overflow:auto; position:relative; padding:29px; border-radius:24px; background:var(--card); box-shadow:0 30px 90px rgba(27,35,28,.3); }.profile-heading { display:flex; gap:13px; align-items:center; }.profile-avatar { width:49px; height:49px; display:grid; place-items:center; border-radius:15px; color:#fff; background:var(--ink); font:2rem "Noto Naskh Arabic",serif; }.profile-heading h2 { margin:7px 0 0; font:500 2.3rem/.96 "Fraunces",Georgia,serif; letter-spacing:-.06em; }.profile-heading p { margin:5px 0 0; color:var(--muted); font-size:.66rem; }.profile-score { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:25px 0 19px; }.profile-score div { padding:13px; border-radius:11px; background:var(--paper); }.profile-score span,.profile-score strong { display:block; }.profile-score span { color:var(--muted); font-size:.55rem; font-weight:800; letter-spacing:.08em; }.profile-score strong { margin-top:7px; font:500 1.2rem "Fraunces",Georgia,serif; }.profile-block { padding:16px 0; border-top:1px solid var(--line); }.profile-block-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }.profile-block-heading strong { display:block; margin-top:6px; font-size:.73rem; }.profile-block-heading > span { color:var(--accent-deep); font-size:.75rem; font-weight:800; }.profile-block input[type=range] { width:100%; margin:16px 0 0; accent-color:var(--accent); }.goal-range-copy { display:flex; justify-content:space-between; margin-top:2px; color:var(--muted); font-size:.57rem; }.profile-block textarea { width:100%; resize:vertical; margin-top:13px; padding:11px; border:1px solid var(--line); border-radius:9px; outline:none; color:var(--ink); background:var(--paper); font-size:.72rem; line-height:1.5; }.profile-block textarea:focus { border-color:var(--accent); }.save-note { border:0; color:var(--accent); background:transparent; font-size:.65rem; font-weight:800; }.profile-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:10px; }.profile-actions .primary-button,.profile-actions .secondary-button { padding:10px 14px; }
@media (max-width:1120px) { .feature-hub { margin-left:30px; margin-right:30px; } }
@media (max-width:760px) { .feature-hub { display:block; margin-left:20px; margin-right:20px; padding-top:55px; }.feature-hub-heading { margin-bottom:26px; }.feature-hub-heading h2 { font-size:2.3rem; }.profile-modal { padding:24px 19px; }.profile-actions { display:grid; grid-template-columns:1fr 1fr; }.profile-actions button { width:100%; }.profile-score strong { font-size:1rem; } }
@media (max-width:430px) { .feature-grid { grid-template-columns:1fr; }.profile-heading h2 { font-size:2rem; }.profile-score { gap:4px; }.profile-score div { padding:10px 8px; }.profile-score strong { font-size:.9rem; } }