/* Minimal styles for project homepage */
:root{--bg:#f0fdfa;--primary:#0ea5a4;--accent:#064e4e;--muted:#4b6b6a;--panel:#ffffff;--surface:#f8faf9}
*{box-sizing:border-box}
body{font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial;line-height:1.6;margin:0;background:var(--bg);color:var(--accent)}
.container{max-width:960px;margin:0 auto;padding:24px}
.site-header{background:linear-gradient(90deg, #ffffff 0%, #fbfdff 100%);border-bottom:1px solid rgba(37,99,235,0.06)}
.site-header .container{display:flex;flex-direction:column;align-items:flex-start;padding:18px}
.site-header h1{margin:0;font-size:1.35rem;font-weight:700;color:var(--primary)}
.site-header .header-login{margin-left:auto}
.login-inline{display:flex;gap:8px;align-items:center}
.login-inline input[type="text"],.login-inline input[type="password"]{padding:8px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:#fff;font-size:0.95rem}
.login-inline input::placeholder{color:#9ca3af}
.login-inline .btn{padding:8px 12px;border-radius:8px}
.login-inline input[name="username"]{min-width:160px}
.login-inline{margin-top:8px}
.site-nav{display:flex;gap:18px;align-items:center;margin-top:8px}
.site-nav .nav-group{display:flex;gap:10px;align-items:center;background:transparent;padding:6px 8px;border-radius:6px}
.site-nav .nav-title{font-weight:700;color:var(--muted);margin-right:6px;font-size:0.95rem}
.site-nav a{color:var(--primary);text-decoration:none;padding:6px 8px;border-radius:6px;font-weight:500}
.site-nav a:hover{background:rgba(37,99,235,0.06)}
.tagline{margin:6px 0 0;color:var(--muted)}
.hero{background:var(--panel);padding:28px;border-radius:8px;margin-top:18px}
.hero h2{margin-top:0}
.buttons{margin-top:12px}
.clean-hero{padding:36px;background:linear-gradient(180deg,#ffffff 0%, #f8fbfb 100%);display:block}
.hero-inner{display:flex;gap:24px;align-items:stretch;flex-direction:column}
.hero-copy{flex:1}
.hero-copy .lead{color:var(--muted);font-size:1.05rem;margin-top:6px}
.hero-cards{display:flex;flex-direction:column;gap:12px}
.card{background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);padding:14px;border-radius:8px;box-shadow:0 10px 30px rgba(37,99,235,0.06);border:1px solid rgba(37,99,235,0.06)}

/* Home page colorful theme overrides */
body.home{background:linear-gradient(135deg,#eff6ff 0%, #dbeafe 45%, #f8fbff 100%);color:var(--text);background-attachment:fixed}
 :root{--bg:transparent}
 .site-header{background:transparent;border-bottom:0}
.site-header h1, .site-header .brand h1{color:var(--accent)}
.tagline{color:var(--muted)}
 .container{max-width:980px;margin:0 auto;padding:28px}

/* Improve header/menu visibility on colorful site: make links pill buttons */
.site-nav .nav-group{background:transparent;padding:0}
.site-nav a{color:#0f172a;background:rgba(255,255,255,0.96);padding:8px 12px;border-radius:999px;margin-right:8px;text-decoration:none;box-shadow:0 6px 18px rgba(2,6,23,0.08);font-weight:700}
.site-nav a:hover{background:#fff;transform:translateY(-1px)}
/* If admin nav uses admin-top-nav, keep slightly transparent pills */
.site-nav.admin-top-nav a{background:rgba(255,255,255,0.92)}
/* When not-logged-in, center the login pill */
.site-nav .nav-group{display:flex;align-items:center}

/* Make panels, cards and hero slightly translucent on colorful background */
body.home .panel, body.home .card, body.home .hero, body.home .login-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 24px rgba(2,6,23,0.06);color:var(--text)}
body.home .panel .panel-header, body.home .panel h4{color:var(--text)}
body.home .muted{color:var(--muted)}
body.home .story-meta{color:var(--muted)}
body.home .story-title a, body.home .brand h1, body.home h1, body.home .site-header h1{color:var(--text)}

/* Buttons tuned for colorful background */
body.home .btn{background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;border:none}
body.home .btn.secondary{background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff}
body.home .feature{background:rgba(255,255,255,0.92);border:1px solid rgba(255,255,255,0.65);color:var(--accent);box-shadow:0 8px 20px rgba(2,6,23,0.08)}

/* Make carousel action buttons (e.g. "Read") clearly visible on colorful home */
body.home .stories-carousel .story-actions .btn{
	background: linear-gradient(135deg,#1d4ed8,#06b6d4);
	color: #fff;
	border: none;
	font-weight: 800;
}

/* Carousel cards subtle lift on colorful bg */
.stories-carousel .story-card{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));border:1px solid rgba(255,255,255,0.06)}
.stories-carousel .cover-thumb{border:0;background:transparent}

/* App download badges tweak to stand out */
.store-badge.app-store{background:rgba(0,0,0,0.85)}
.store-badge.play-store{background:linear-gradient(90deg,#34d399,#06b6d4)}

/* Footer contrast */
.site-footer{color:rgba(255,255,255,0.85)}

/* Ensure the About section remains readable on the colorful site */
.about{background:rgba(255,255,255,0.94);color:#0f172a;border:1px solid rgba(15,23,42,0.04)}
.about a{color:var(--primary)}

/* Make download-app text readable on colorful site */
.download-app{background:rgba(255,255,255,0.98);color:#0f172a;border:1px solid rgba(15,23,42,0.04)}
.download-app h3{color:#0f172a}
.download-app .muted{color:#475569}
.download-app .store-badge{color:#fff}
.card h4{margin:0 0 6px 0;color:var(--primary)}
.features{margin-top:18px}
.features-grid{display:flex;gap:12px;flex-wrap:wrap}
.feature{display:inline-block;padding:12px 16px;background:linear-gradient(180deg,#ffffff,#eff6ff);border-radius:12px;border:1px solid rgba(29,78,216,0.06);color:var(--accent);text-decoration:none;font-weight:800;box-shadow:0 8px 18px rgba(2,6,23,0.04)}
.btn{display:inline-block;padding:10px 16px;background:linear-gradient(135deg,var(--primary),#60a5fa);color:#fff;border-radius:10px;text-decoration:none;font-weight:800;box-shadow:0 8px 18px rgba(37,99,235,0.18)}
.endpoints, .about{background:var(--panel);padding:18px;border-radius:8px;margin-top:16px}
.endpoints ul{margin:0;padding-left:18px}
.site-footer{margin-top:28px;padding:16px 0;text-align:center;color:var(--muted)}

/* Story answer feedback */
.answer-correct { background: #d4edda !important; }
.answer-wrong { background: #f8d7da !important; }
.answer-correct-outline { outline: 2px solid #28a745 !important; }
.feedback { margin-top: 0.5em; font-weight: bold; }

@media (min-width:700px){.site-header .container{flex-direction:row;justify-content:space-between;align-items:center}}

/* Quill editor tweaks to ensure visibility on site theme */
.ql-toolbar{background:#fff;border:1px solid #e6edf3;border-bottom:none;border-radius:6px 6px 0 0;padding:6px}
.ql-container{border:1px solid #e6edf3;border-radius:0 0 6px 6px;background:#fff}
.ql-editor{min-height:200px;padding:12px;color:#0f172a}
.ql-editor img{max-width:100%;height:auto}
.ql-toolbar .ql-formats{margin-right:8px}

/* Cover thumbnails */
.cover-thumb{max-width:100%;width:100%;height:auto;max-height:220px;object-fit:contain;object-position:center;border-radius:8px;border:1px solid #e6edf3;margin-bottom:8px;display:block;background:#fff}
.series-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px;margin-right:8px;vertical-align:middle;border:1px solid #e6edf3}

/* Admin dashboard styles */
#admin-controls{margin-bottom:16px}
.admin-layout{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.sidebar-link{display:block;padding:8px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:700}
.sidebar-link.active{background:rgba(37,99,235,0.06);color:var(--primary)}
.sidebar-actions{margin-top:12px}
.admin-main{display:flex;flex-direction:column;gap:16px}
.admin-main{padding:6px}
/* animate collapse by shrinking width & fading rather than display:none */
.admin-layout{/* single-column layout (sidebar removed) */}
.metric-card{padding:14px}
.panel{padding:18px}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.quick-actions{display:flex;flex-wrap:wrap;gap:8px}
/* dashboard refinements */
.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.dashboard-header h2{margin:0}
.dashboard-header .muted{color:var(--muted);font-weight:600}
.dashboard-actions{display:flex;gap:12px;align-items:center}
.dashboard-actions input{padding:8px;border-radius:8px;border:1px solid rgba(37,99,235,0.06);min-width:220px}

.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.metric-card{background:linear-gradient(180deg,#fff 0%, #fbfdff 100%);padding:12px;border-radius:8px;border:1px solid rgba(37,99,235,0.04);text-align:center}
.metric-value{font-size:1.5rem;font-weight:800;color:var(--primary)}
.metric-label{color:var(--muted);font-weight:700;margin-top:6px}

.dashboard-grid{display:grid;grid-template-columns:2fr 3fr;gap:16px}
.panel{background:var(--panel);padding:16px;border-radius:8px;margin:0;border:1px solid rgba(37,99,235,0.04);box-shadow:0 8px 24px rgba(37,99,235,0.04)}
/* subtle header inside panels */
.panel .panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
#collapse-btn{ }
.collapse-btn{background:transparent;border:1px solid rgba(0,0,0,0.04);color:var(--muted);padding:.25rem .5rem;border-radius:6px;cursor:pointer}
/* animated panel body: use max-height + opacity for smooth collapse/expand */
.panel .panel-body{overflow:hidden;max-height:1200px;transition:max-height .32s cubic-bezier(.2,.9,.2,1),opacity .22s ease;padding-top:0}
.panel.collapsed .panel-body{max-height:0;opacity:0;pointer-events:none;padding-top:0}
#lists{display:grid;grid-template-columns:1fr;gap:16px}
#lists{display:grid;grid-template-columns:1fr;gap:16px}
.panel h4{margin:0 0 8px 0;font-size:1.05rem;color:var(--primary)}

.row{padding:8px;border-radius:6px;border:1px solid transparent;display:flex;gap:8px;align-items:center;justify-content:space-between}
.row:hover{background:linear-gradient(90deg, rgba(37,99,235,0.03), rgba(37,99,235,0.02));border-color:rgba(37,99,235,0.06)}
.row + .row{margin-top:8px}
.row strong{color:#111827;margin-right:6px}

.btn{background:linear-gradient(135deg,var(--primary),#60a5fa);color:#fff;padding:8px 12px;border-radius:10px;text-decoration:none;border:none;cursor:pointer;font-weight:800}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:linear-gradient(135deg,var(--secondary),#22c55e)}

#stories-pager{display:flex;align-items:center;gap:12px}
#stories-page{font-weight:600;color:var(--muted)}

/* larger screens: fluid container */
@media(min-width:1000px){
		.container{max-width:1200px}
}

@media(max-width:900px){
	.hero-inner{flex-direction:column}
	.hero-cards{flex-direction:row;flex-wrap:wrap}
	.metrics-grid{grid-template-columns:repeat(2,1fr);gap:10px}
	.dashboard-grid{grid-template-columns:1fr}
}

/* Book-style story view */
:root{--book-bg:#fffdf8;--book-paper:#fffefb;--book-text:#042f2e;--book-accent:var(--primary);--book-muted:#4b6b6a;--book-shadow:0 18px 40px rgba(2,6,23,0.08);--book-font:'Merriweather', Georgia, 'Times New Roman', serif}
.book{max-width:780px;margin:28px auto;padding:36px;background:linear-gradient(180deg,var(--book-paper),#fff);border-radius:12px;box-shadow:var(--book-shadow);font-family:var(--book-font);color:var(--book-text)}
.book-header{border-bottom:1px solid rgba(15,23,42,0.04);padding-bottom:18px;margin-bottom:20px}
.book-title{font-size:2.25rem;margin:0 0 8px 0;line-height:1.05;font-weight:700}
.book-meta{margin:0;color:var(--book-muted);font-size:0.95rem}
.book-body{padding:8px 4px;font-size:1.125rem;line-height:1.85;color:var(--book-text)}
.book .story-content p{orphans:3;widows:3;margin:0 0 1.25rem 0}
.book .story-content p:first-of-type::first-letter{float:left;font-size:4.4rem;line-height:1;font-weight:700;margin-right:0.15em;margin-left:0;color:var(--book-accent);font-family:var(--book-font)}
.book .story-content img{display:block;max-width:100%;height:auto;margin:16px auto;border-radius:8px}
.book-footer{border-top:1px dashed rgba(15,23,42,0.04);margin-top:24px;padding-top:12px;color:var(--book-muted);font-size:0.95rem}

@media(max-width:820px){
	.book{padding:22px;margin:14px}
	.book-title{font-size:1.6rem}
	.book-body{font-size:1rem}
}


/* Login page styles */
.login-page{display:flex;align-items:center;justify-content:center;padding:36px 16px}
.login-card{display:flex;gap:20px;max-width:680px;width:100%;background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);border-radius:12px;padding:20px;box-shadow:0 14px 30px rgba(15,23,42,0.06);border:1px solid rgba(37,99,235,0.06)}
.login-left{flex:1;min-width:280px}
.login-left h2{margin:0 0 8px 0;color:var(--primary);font-size:1.6rem}
.login-left .lead{color:var(--muted);margin-bottom:14px}
.login-form .form-row{display:flex;flex-direction:column;margin-bottom:12px}
.login-form label{font-weight:700;color:var(--muted);margin-bottom:6px}
.login-form input[type="text"],.login-form input[type="password"]{padding:12px;border-radius:10px;border:1px solid rgba(15,23,42,0.06);background:#fff;font-size:1rem}
.login-form input::placeholder{color:#9ca3af}
.login-form .form-actions{display:flex;gap:10px;align-items:center;margin-top:6px}
.login-right{width:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.login-right .brand{font-weight:800;color:var(--primary);font-size:1.15rem}
.login-right .illustration svg{display:block}
.login-form .field-feedback{color:#b91c1c;margin-top:10px}
.login-form .muted.small{color:var(--muted);font-size:0.95rem;margin-top:12px}

/* Button refinements */
.btn{padding:10px 16px;border-radius:10px;border:none;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid rgba(15,23,42,0.08);color:var(--accent);font-weight:800;box-shadow:none}
.btn{background:linear-gradient(135deg,var(--primary),#60a5fa);color:#fff;font-weight:800}

/* Under construction page */
.under-construction-shell{padding:24px 0 40px}
.under-construction-card{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;padding:32px;border-radius:24px;background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239,246,255,0.96));border:1px solid rgba(37,99,235,0.08);box-shadow:0 24px 60px rgba(15,23,42,0.08);overflow:hidden;position:relative}
.under-construction-badge{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:8px 12px;border-radius:999px;background:rgba(37,99,235,0.08);color:var(--accent);font-weight:800;font-size:0.9rem;letter-spacing:0.02em;text-transform:uppercase}
.under-construction-copy h2{margin:12px 0 10px;font-size:2rem;color:var(--accent)}
.under-construction-copy p{margin:0;color:var(--muted);font-size:1.02rem}
.under-construction-highlights{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.under-construction-highlights li{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,0.72);border:1px solid rgba(37,99,235,0.06);color:var(--text)}
.under-construction-highlights li::before{content:"✦";color:var(--primary);font-weight:900;flex-shrink:0;margin-top:1px}
.under-construction-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.under-construction-panel{position:relative;padding:24px;border-radius:20px;background:linear-gradient(140deg, #102a67, #2563eb 55%, #38bdf8);color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:280px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.16)}
.under-construction-panel-top{position:relative;z-index:2}
.under-construction-panel h3{margin:0 0 8px 0;font-size:1.25rem}
.under-construction-panel p{margin:0;color:rgba(255,255,255,0.92)}
.under-construction-eyebrow{margin:0 0 8px 0;font-size:0.82rem;font-weight:800;text-transform:uppercase;letter-spacing:0.16em;color:rgba(255,255,255,0.8)}
.under-construction-ornament{position:absolute;inset:auto -18px -18px auto;width:220px;height:220px;pointer-events:none;z-index:1}
.under-construction-ornament .orb{position:absolute;border-radius:50%;opacity:0.22;animation:floatOrb 6s ease-in-out infinite}
.under-construction-ornament .orb-one{width:140px;height:140px;right:0;bottom:0;background:#fff}
.under-construction-ornament .orb-two{width:84px;height:84px;right:42px;bottom:54px;background:#7dd3fc;animation-delay:1.2s}
.under-construction-ornament .orb-three{width:54px;height:54px;right:96px;bottom:108px;background:#dbeafe;animation-delay:2.1s}
.under-construction-panel-bottom{position:relative;z-index:2;margin-top:18px}
.under-construction-status{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.16);backdrop-filter:blur(6px)}
.under-construction-status span{font-weight:700;text-transform:uppercase;letter-spacing:0.04em;font-size:0.8rem;opacity:0.9}
.under-construction-status strong{font-size:1rem}
.under-construction-meter{height:8px;border-radius:999px;background:rgba(255,255,255,0.18);margin-top:12px;overflow:hidden}
.under-construction-meter-bar{width:72%;height:100%;border-radius:inherit;background:linear-gradient(90deg, #fef3c7, #fb923c)}

@keyframes floatOrb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}

@media(max-width:900px){
  .under-construction-card{grid-template-columns:1fr}
  .under-construction-panel{min-height:auto}
}

@media(max-width:900px){
  .login-card{flex-direction:column;padding:18px}
  .login-right{width:100%;order:2}
  .login-left{order:1}
}

/* tighter mobile admin layout */
@media(max-width:700px){
	.admin-layout{grid-template-columns:1fr}
	.admin-main{order:1}
	.card-grid{grid-template-columns:1fr}
	.metrics-grid{grid-template-columns:repeat(2,1fr)}
}

/* chevron icon inside collapse button */
.collapse-btn .chev{display:inline-block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--muted);margin-right:8px;vertical-align:middle;transition:transform .25s ease}
.collapse-btn[aria-expanded="false"] .chev{transform:rotate(-90deg) translateX(-1px)}
.collapse-btn .label{vertical-align:middle}

/* small tweaks for forms and modal */
#confirm-modal .btn{min-width:96px}

/* make admin breadcrumb visible and subtle */
#admin-breadcrumb{display:block;margin-bottom:12px;color:var(--muted);font-size:0.95rem}

/* Compact list/table styles for admin lists */
.list-header, .list-body{background:transparent}
.list-header{display:grid;grid-template-columns:60px 1fr 1.6fr 90px 160px 160px;padding:8px 12px;border-bottom:1px solid #eef2f7;color:var(--muted);font-weight:700;font-size:0.95rem;align-items:center}
.list-body .row{display:grid;grid-template-columns:60px 1fr 1.6fr 90px 160px 160px;padding:8px 12px;border:1px solid #f1f5f9;background:transparent;align-items:center}
.list-body .row:nth-child(odd){background:#ffffff}
.list-body .row:nth-child(even){background:#fbfdff}
.list-body .row .actions{display:flex;gap:8px;justify-content:flex-end}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(37,99,235,0.08);color:var(--primary);font-weight:700;font-size:0.85rem}

/* action buttons inside list rows */
.list-body .row a, .list-body .row button{font-weight:600;padding:6px 8px;border-radius:6px;text-decoration:none;border:none;cursor:pointer}
.list-body .row a.edit{background:var(--primary);color:#fff}
.list-body .row a.delete{background:#ef4444;color:#fff}
.list-body .row a.view{background:rgba(37,99,235,0.12);color:var(--primary)}

@media(max-width:900px){
	.list-header, .list-body .row{grid-template-columns:40px 1fr 1fr 80px 120px 80px}
	/* allow horizontal scrolling when columns overflow on small devices */
	.list-body{overflow:auto;}
	.list-header{white-space:nowrap}
}

/* Modern admin enhancements */
.modern-admin { --admin-bg: linear-gradient(180deg,#f7fbff 0%, #ffffff 100%); }
.admin-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 6px;background:transparent}
.admin-title h1{margin:0;font-size:1.25rem;color:var(--primary)}
.admin-title .muted{color:var(--muted);margin-top:4px;font-size:0.95rem}
.admin-actions{display:flex;align-items:center;gap:12px}
.admin-status{padding:8px 12px;border-radius:999px;background:rgba(2,6,23,0.04);color:var(--muted);font-weight:700}
.admin-controls .btn{margin-left:8px}

.admin-overview .cards{display:flex;gap:12px;margin:12px 0}
.admin-overview .card{flex:1;padding:14px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#fbfdff);box-shadow:0 8px 24px rgba(15,23,42,0.04);border:1px solid rgba(37,99,235,0.04);text-align:left}
.admin-overview .card-title{color:var(--muted);font-weight:700;margin-bottom:6px}
.admin-overview .card-value{font-size:1.4rem;font-weight:900;color:var(--primary)}

/* Form styles for admin edit/create pages */
.form-row{display:flex;flex-direction:column;margin-bottom:12px}
.form-row label{font-weight:700;color:var(--muted);margin-bottom:6px}
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="password"]{padding:10px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:#fff}
.field-help{font-size:0.9rem;color:var(--muted);margin-top:6px}
.field-feedback{font-size:0.95rem;margin-top:6px}
.edit-actions{display:flex;gap:8px;align-items:center;margin-top:12px}
.toast{position:fixed;right:20px;bottom:20px;background:#111827;color:#fff;padding:10px 14px;border-radius:8px;box-shadow:0 6px 18px rgba(2,6,23,0.12);display:none}
.btn.ghost{background:transparent;border:1px solid rgba(15,23,42,0.06);color:var(--primary)}

/* Light blue and white theme overrides */
:root{--bg:#f4f9ff;--primary:#2563eb;--secondary:#0ea5e9;--accent:#1e3a8a;--highlight:#bfdbfe;--text:#0f172a;--muted:#475569;--panel:#ffffff;--surface:#eff6ff}
html,body{background:radial-gradient(circle at top left, rgba(191,219,254,0.35), transparent 30%),radial-gradient(circle at top right, rgba(125,211,252,0.22), transparent 24%),linear-gradient(135deg, #f8fbff 0%, #eff6ff 45%, #ffffff 100%) !important;color:var(--text) !important}
.site-header{background:linear-gradient(90deg, rgba(255,255,255,0.98), rgba(239,246,255,0.96)) !important;border-bottom:1px solid rgba(15,23,42,0.05) !important;box-shadow:0 8px 24px rgba(15,23,42,0.03)}
.site-header h1, .brand h1{color:var(--accent) !important}
.tagline{color:var(--muted) !important}
.container{max-width:1080px;padding:28px}

/* Header links as bright pills with accent text */
.site-nav a{background:#fff !important;color:var(--accent) !important;padding:8px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(2,6,23,0.06);font-weight:800;border:1px solid rgba(29,78,216,0.08)}
.site-nav a:hover{transform:translateY(-1px);background:#fffdf4 !important}

/* Panels and cards should be solid white for readability */
.panel, .card, .hero, .login-card, .about, .download-app{background:var(--panel) !important;color:var(--text) !important;border:1px solid rgba(15,23,42,0.05) !important;box-shadow:0 12px 30px rgba(2,6,23,0.06) !important}
.card h4{color:var(--accent) !important}

.stories-carousel .story-card{background:var(--panel) !important;border:1px solid rgba(15,23,42,0.05) !important}
.stories-carousel .cover-thumb{background:transparent}

/* Download badges — keep colorful but remove heavy gradients where possible */
.store-badge.app-store{background:#111827 !important}
.store-badge.play-store{background:linear-gradient(90deg,#22c55e,#06b6d4) !important}

.site-footer{color:var(--muted) !important}

.story-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.story-main{min-width:0}
.story-side{background:transparent}
.story-side .form-row input, .story-main .form-row input, .story-side .form-row select, .story-side .form-row textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:#fff}
.questions-panel{margin-top:12px}

.story-side{max-width:360px}

/* CKEditor and editable area tweaks to avoid squashing */
.ck-editor__editable_inline, .ck-editor__editable{min-height:560px;max-width:100%;box-sizing:border-box;overflow:auto}

/* Ensure editor textarea fallback still has a roomy height */
.story-main textarea#editor{min-height:520px}
@media(max-width:900px){
	.story-main textarea#editor{min-height:360px}
}

@media(max-width:900px){
	.story-form-grid{grid-template-columns:1fr}
	.story-side{order:2}
	.story-main{order:1}
}

.admin-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.admin-panels .panel{min-height:220px}

@media(max-width:900px){
	.admin-panels{grid-template-columns:1fr}
	.admin-overview .cards{flex-direction:column}
}

/* Stories grid and cards */
.stories-hero{padding:18px}
.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:12px}
.story-card{background:linear-gradient(180deg,#ffffff 0%, #fff9eb 100%);border-radius:14px;padding:14px;border:1px solid rgba(15,23,42,0.05);box-shadow:0 10px 30px rgba(2,6,23,0.05);display:flex;flex-direction:column;gap:10px;min-height:220px}
.story-card .story-cover{width:100%;height:auto;border-radius:8px;overflow:hidden}
.story-card .cover-thumb{width:100%;height:auto;max-height:220px;object-fit:contain;object-position:center;border-radius:8px;border:1px solid rgba(29,78,216,0.08)}
.story-body{display:flex;flex-direction:column;gap:8px}
.story-title{margin:0;font-size:1.05rem}
.story-title a{color:var(--accent);text-decoration:none}
.story-title a:hover{text-decoration:underline}
.story-meta{font-size:0.9rem;color:var(--muted)}
.story-excerpt{color:#334155;margin:0}
.story-actions{margin-top:auto;display:flex;gap:8px}
.story-actions .btn{padding:8px 12px;border-radius:8px}
.story-actions .btn.ghost{background:transparent;border:1px solid rgba(15,23,42,0.08);color:var(--accent)}

@media(max-width:720px){
  .story-card{padding:12px}
	.story-card .cover-thumb{max-height:160px}
}

/* Two-column layout for story cards with a cover */
@media (min-width: 720px) {
	.story-card.has-cover{flex-direction:row;align-items:stretch}
	.story-card.has-cover .story-cover{flex:0 0 40%;max-width:40%;padding-right:12px;display:flex;align-items:center;justify-content:center}
	.story-card.has-cover .story-body{flex:1;padding-left:12px;display:flex;flex-direction:column}
	/* ensure the image fills the cover column while keeping full image visible */
	.story-card.has-cover .cover-thumb{width:100%;height:100%;max-height:none;object-fit:contain}
}

/* Horizontal carousel for homepage stories */
.home-promo-card{margin-top:22px;padding:24px;border-radius:18px;background:linear-gradient(135deg, rgba(255,255,255,0.97), rgba(255,244,214,0.96));border:1px solid rgba(15,23,42,0.06);box-shadow:0 18px 40px rgba(2,6,23,0.08)}
.home-promo-copy{display:flex;flex-direction:column;gap:8px;max-width:720px}
.home-promo-copy h2{margin:0;font-size:1.75rem;line-height:1.15;color:var(--accent)}
.eyebrow{display:inline-flex;align-self:flex-start;margin:0;padding:6px 10px;border-radius:999px;background:rgba(250,204,21,0.2);color:var(--primary);font-size:0.78rem;font-weight:900;letter-spacing:0.08em;text-transform:uppercase}
.home-promo-grid{display:grid;grid-template-columns:1.1fr 20px 0.9fr;gap:16px;margin-top:18px;align-items:stretch}
.home-promo-column{padding:18px;border-radius:16px;background:rgba(255,255,255,0.9);border:1px solid rgba(15,23,42,0.05);display:flex;flex-direction:column;gap:12px}
.home-promo-column h3{margin:0;color:var(--accent);font-size:1.1rem}
.home-promo-subscription{background:linear-gradient(180deg, rgba(250,204,21,0.13), rgba(255,255,255,0.94));border-color:rgba(249,115,22,0.18)}
.home-promo-author{background:linear-gradient(180deg, rgba(6,182,212,0.12), rgba(255,255,255,0.94));border-color:rgba(29,78,216,0.16)}
.promo-tag{margin:0;display:inline-flex;align-self:flex-start;padding:5px 10px;border-radius:999px;font-size:0.72rem;letter-spacing:0.07em;text-transform:uppercase;font-weight:900;color:#0f172a;background:rgba(255,255,255,0.85);border:1px solid rgba(15,23,42,0.08)}
.home-promo-divider{position:relative}
.home-promo-divider::before{content:"";position:absolute;top:10px;bottom:10px;left:50%;width:1px;transform:translateX(-50%);background:linear-gradient(180deg, rgba(249,115,22,0.25), rgba(29,78,216,0.25))}
.plan-list,.author-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.plan-list li{padding:12px 14px;border-radius:12px;background:#fff;border:1px solid rgba(15,23,42,0.05);box-shadow:0 6px 16px rgba(2,6,23,0.03)}
.plan-list strong,.plan-list span{display:block}
.plan-list strong{font-size:1rem;color:var(--accent)}
.plan-list span{margin-top:2px;font-size:0.88rem;font-weight:700;color:var(--secondary)}
.plan-list p,.home-promo-author p{margin:8px 0 0;color:var(--muted)}
.author-list li{position:relative;padding-left:18px;color:var(--accent)}
.author-list li::before{content:"";position:absolute;left:0;top:0.7em;width:8px;height:8px;border-radius:999px;background:var(--primary)}
.home-promo-column .btn{align-self:flex-start}
.home-stories{margin-top:20px}
.stories-carousel{display:flex;gap:16px;overflow-x:auto;padding:12px 6px;margin-top:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.stories-carousel::-webkit-scrollbar{height:8px}
.stories-carousel::-webkit-scrollbar-thumb{background:rgba(15,23,42,0.08);border-radius:8px}
.stories-carousel .story-card{flex:0 0 320px;min-width:280px;max-width:360px;scroll-snap-align:start}
.stories-carousel .story-card .story-cover{padding-right:0}
.stories-carousel .story-card.has-cover{flex-direction:row;align-items:stretch}
.stories-carousel .story-card .story-cover{flex:0 0 40%;max-width:40%;padding-right:12px;display:flex;align-items:center;justify-content:center}
.stories-carousel .cover-thumb{width:100%;height:140px;object-fit:cover;object-position:center;border-radius:8px}

@media(max-width:520px){
	.home-promo-card{padding:18px;border-radius:16px}
	.home-promo-copy h2{font-size:1.45rem}
	.home-promo-grid{grid-template-columns:1fr}
	.home-promo-divider{display:none}
  .stories-carousel .story-card{flex:0 0 84%;min-width:84%}
  .stories-carousel .cover-thumb{height:140px}
}

/* App download section styles */
.download-app{margin-top:24px;padding:24px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#eff6ff);box-shadow:0 8px 30px rgba(2,6,23,0.04);text-align:center}
.download-inner{max-width:980px;margin:0 auto}
.download-app h3{margin:0;font-size:1.25rem;color:var(--accent)}
.download-app .muted{color:var(--muted);margin-top:6px}
.store-buttons{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:16px;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border-radius:12px;text-decoration:none;color:#fff;font-weight:600;box-shadow:0 6px 18px rgba(2,6,23,0.06)}
.store-badge svg{width:36px;height:36px;flex:0 0 36px}
.store-badge .badge-text{line-height:1}
.store-badge .badge-text strong{display:block;font-size:0.75rem}
.app-store{background:#111827}
.play-store{background:linear-gradient(90deg,#2563eb,#0ea5e9);color:#fff}

@media(max-width:520px){
	.store-badge{width:48%;justify-content:center}
	.store-badge .badge-text{font-size:0.9rem}
}

/* Pending review count badge (small red pill) */
.pending-badge{display:inline-block;background:#ef4444;color:#fff;border-radius:999px;padding:2px 8px;font-size:0.75rem;font-weight:700;margin-left:6px;vertical-align:middle}

/* Notifications / My Reviews styling (semantic elements) */
.notifications{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:12px}
.notification{background:var(--panel);border:1px solid rgba(37,99,235,0.04);padding:12px;border-radius:8px;box-shadow:0 8px 20px rgba(2,6,23,0.04)}
.notification.unread{border-color:rgba(37,99,235,0.12);box-shadow:0 12px 30px rgba(37,99,235,0.06)}
.notification article{display:block}
.notification h3{margin:0 0 6px 0;font-size:1rem;color:var(--primary)}
.notification p{margin:0 0 8px 0;color:#0f172a}
.notification p.muted, .notification .muted{color:var(--muted);font-size:0.9rem;margin-top:6px}
.notification details{margin-top:8px}
.notification summary{cursor:pointer;padding:8px;background:transparent;border-radius:6px;font-weight:700;color:var(--primary)}
.notification ol{margin:8px 0 0 18px;padding:0}
.notification ol li{margin:6px 0;color:#111827}

/* Smaller compact layout on narrow screens */
@media(max-width:720px){
	.notification{padding:10px}
	.notification h3{font-size:0.98rem}
}

/* Plans page */
.plans-hero{margin-top:8px}
.plans-hero h1{margin:0 0 8px 0;color:var(--accent)}
.plans-billing-toggle{margin:14px auto 0 auto;display:flex;gap:8px;padding:6px;border:1px solid rgba(15,23,42,0.1);border-radius:999px;background:#fff;width:max-content;justify-content:center}
.billing-tab{border:none;background:transparent;color:var(--muted);font-weight:800;padding:8px 14px;border-radius:999px;cursor:pointer;transition:all 160ms ease}
.billing-tab:hover{color:var(--accent);background:rgba(15,23,42,0.04)}
.billing-tab.is-active{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(2,6,23,0.14)}
.plans-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
.plan-card{background:linear-gradient(180deg,#ffffff,#fffaf0);border:1px solid rgba(15,23,42,0.06);border-radius:14px;padding:18px;box-shadow:0 10px 28px rgba(2,6,23,0.05);display:flex;flex-direction:column;gap:12px}
.plan-head h2{margin:0;color:var(--accent)}
.plan-price{margin:6px 0 0 0;font-size:1.15rem;font-weight:900;color:var(--primary)}
.plan-price-primary{display:block}
.plan-price-secondary{display:block;margin-top:4px;font-size:0.92rem;font-weight:700;color:var(--muted)}
.plan-price-secondary.is-hidden{display:none}
.plan-includes{margin:0;padding-left:18px;color:var(--text);display:flex;flex-direction:column;gap:8px;flex:1}
.plan-free{border-top:6px solid #22c55e}
.plan-family{border-top:6px solid #06b6d4}
.plan-premium{border-top:6px solid #2563eb}

/* Homepage redesign: stories + plans + footer */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.section-head h3{margin:0;color:var(--accent);font-size:1.45rem;letter-spacing:-0.01em}
.section-head p{margin:0;max-width:700px}

.home-stories{margin-top:14px}

.home-subscriptions{margin-top:24px;padding:22px;border-radius:18px;background:linear-gradient(180deg,#ffffff,#f8fbff);border:1px solid rgba(15,23,42,0.06);box-shadow:0 14px 28px rgba(2,6,23,0.06)}
.home-subscriptions-grid{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.home-plan-card{padding:16px;border-radius:14px;background:#fff;border:1px solid rgba(15,23,42,0.08);display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 18px rgba(2,6,23,0.04)}
.home-plan-card h4{margin:0;color:var(--accent);font-size:1.05rem}
.home-plan-card .price{margin:0;color:var(--primary);font-size:1.05rem;font-weight:900}
.home-plan-card .muted{margin:0;flex:1}
.home-plan-card .btn{align-self:flex-start}
.home-plan-free{border-top:5px solid #22c55e}
.home-subscriptions-actions{margin-top:14px;display:flex;justify-content:flex-end}

.site-footer{margin-top:30px;padding:26px 0;background:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(255,247,232,0.92));border-top:1px solid rgba(15,23,42,0.06)}
.footer-grid{display:grid;grid-template-columns:1.1fr 1.1fr 0.8fr 1.2fr;gap:20px;align-items:start}
.footer-column h4{margin:0 0 8px 0;color:var(--accent)}
.footer-column p{margin:0;color:var(--muted)}
.footer-column a{display:inline-block;margin-top:10px;color:var(--accent);font-weight:700;text-decoration:none}
.footer-column a:hover{text-decoration:underline}
.footer-join-team{padding:14px;border-radius:12px;background:rgba(6,182,212,0.08);border:1px solid rgba(29,78,216,0.14)}
.footer-join-team .btn{margin-top:12px}
.footer-meta{display:flex;flex-direction:column;gap:4px}
.footer-meta .copyright{margin-top:12px;font-size:0.9rem}
.footer-apps .store-buttons{justify-content:flex-start;margin-top:12px}
.footer-apps .store-badge{padding:8px 12px;border-radius:10px}
.footer-apps .store-badge svg{width:28px;height:28px;flex:0 0 28px}
.footer-apps .badge-text{font-size:0.85rem}

/* Register page refinements */
.register-card{max-width:760px;padding:24px;background:linear-gradient(180deg,#ffffff 0%, #fffdf9 100%)}
.register-left h2{font-size:1.8rem;letter-spacing:-0.02em}
.register-form{display:flex;flex-direction:column;gap:14px}
.register-section{padding:14px;border-radius:12px;background:rgba(255,255,255,0.88);border:1px solid rgba(15,23,42,0.06)}
.register-section h3{margin:0 0 10px 0;font-size:1.03rem;color:var(--accent)}
.register-hint{margin:0 0 8px 0}
.register-form .form-row{margin-bottom:10px}
.register-form .form-row:last-child{margin-bottom:0}
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form select{width:100%;padding:11px 12px;border-radius:10px;border:1px solid rgba(15,23,42,0.12);background:#fff;font-size:0.97rem}
.register-form input:focus,
.register-form select:focus{outline:none;border-color:rgba(29,78,216,0.42);box-shadow:0 0 0 3px rgba(29,78,216,0.12)}
.form-grid.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.register-form .short-field{max-width:140px}
.register-form .form-actions{margin-top:4px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.register-form .field-feedback{margin-top:8px}

.register-card{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
.register-main{min-width:0}
.register-aside{position:sticky;top:12px;padding:16px;border-radius:12px;border:1px solid rgba(15,23,42,0.08);background:linear-gradient(180deg,#fff,#fff6df);display:flex;flex-direction:column;gap:12px}
.register-aside h3{margin:0;color:var(--accent);font-size:1.1rem}
.register-aside .btn{align-self:flex-start}
.register-aside-tips{padding-top:8px;border-top:1px dashed rgba(15,23,42,0.12)}
.register-aside-tips h4{margin:0 0 6px 0;font-size:0.95rem;color:var(--accent)}
.register-aside-tips ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--muted)}

@media(max-width:700px){
	.register-card{padding:18px}
	.form-grid.two-col{grid-template-columns:1fr}
	.register-form .short-field{max-width:none}
}

@media(max-width:960px){
	.register-card{grid-template-columns:1fr}
	.register-aside{position:static}
}

@media(max-width:900px){
	.plans-grid{grid-template-columns:1fr}
	.home-subscriptions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:520px){
	.plans-billing-toggle{display:flex;width:100%;padding:5px}
	.billing-tab{flex:1;text-align:center}
	.home-subscriptions{padding:16px}
	.home-subscriptions-grid{grid-template-columns:1fr}
	.home-subscriptions-actions{justify-content:flex-start}
	.footer-grid{grid-template-columns:1fr}
}

/* Profile selector layout */
.profile-selector-panel{max-width:960px;margin:20px auto;display:grid;gap:18px}
.profile-selector-head h2{margin:0}
.profile-selector-head p{margin-top:6px}
.profile-parent-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.child-profiles-section h3{margin:0 0 10px 0}
.child-profiles-grid{display:grid;gap:12px}
.child-profile-card{display:grid;gap:12px;padding:14px;border:1px solid rgba(15,23,42,0.08);border-radius:12px;background:linear-gradient(180deg,#fff,#fffaf0);box-shadow:0 8px 20px rgba(2,6,23,0.04)}
.child-profile-top-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.child-profile-meta{display:flex;flex-direction:column;gap:2px}
.child-profile-meta strong{font-size:1rem;color:var(--accent)}

.child-login-credentials{display:grid;gap:8px;padding:10px;background:rgba(15,23,42,0.03);border:1px solid rgba(15,23,42,0.06);border-radius:8px}
.credential-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center}
.credential-value{color:#0f172a;word-break:break-all}
.credential-password{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.credential-btn{padding:6px 10px;border-radius:8px;font-size:0.86rem;box-shadow:none}

.child-edit-form{display:grid;gap:10px;grid-template-columns:1.1fr 170px 180px auto;align-items:end}
.child-edit-form label{display:grid;gap:4px}
.child-edit-form input,
.child-edit-form select,
.create-child-form input,
.create-child-form select{width:100%;padding:10px;border:1px solid rgba(15,23,42,0.08);border-radius:8px;background:#fff}

.child-delete-form{display:flex;justify-content:flex-end}
.btn.danger{background:#ef4444;color:#fff;box-shadow:0 8px 18px rgba(239,68,68,0.22)}

.create-child-form{display:grid;gap:10px;max-width:560px}

@media(max-width:820px){
	.child-edit-form{grid-template-columns:1fr}
	.child-delete-form{justify-content:flex-start}
	.credential-row{grid-template-columns:1fr auto auto}
}