/* AlManara V7 — polished RTL design. Enhances UI only; actual permissions remain Supabase RLS. */
:root {
 --v7-green:#174c31;--v7-forest:#0c281c;--v7-accent:#c5dd79;
 --v7-gold:#e3b746;--v7-border:#dbe8d7;--v7-shadow:0 14px 46px #1d482112;
}
body { background:radial-gradient(circle at 95% 0,#dcefd5 0,transparent 34%),#f5f9f2;letter-spacing:.04px; }
::selection { background:#cae8ab;color:#163c27; }
.v7-header { padding:19px 24px 0;border-bottom:0;border-radius:0; }
.v7-header .hero-inner { max-width:1220px;gap:16px; }
.v7-header .mark { width:64px;height:64px;flex-basis:64px; }
.v7-header .identity h1 {font-size:clamp(17px,2vw,22px);font-weight:800;}
.header-user {margin-right:auto;display:flex;align-items:center;gap:10px;min-width:0;padding:6px 10px;border:1px solid #a0ca9280;border-radius:17px;background:#ffffff12;}
.header-avatar,.settings-avatar { display:grid;place-items:center;flex:0 0 auto;width:43px;height:43px;border-radius:14px;background:#c6df8d;color:#113a25;font-weight:900;font-size:16px; }
.header-user-text {display:flex;flex-direction:column;min-width:0;gap:4px;}
.header-user-text strong {font-size:12px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.role-pill {display:inline-flex;align-items:center;align-self:flex-start;max-width:100%;font-weight:800;font-size:11px;line-height:1.7;padding:3px 10px;border-radius:999px;border:1px solid #c6e89666;background:#224b29;color:#ecffd8;}
.header-toolbar {max-width:1220px;margin:14px auto 0;border-top:1px solid #cbe9b92b;padding:11px 0 12px;}
.header-toolbar-inner {display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.v7-header button.header-icon {min-height:40px;display:inline-flex;align-items:center;gap:7px;justify-content:center;white-space:nowrap;padding:8px 13px;border-radius:12px;border:1px solid #ffffff26;background:#ffffff11;font-size:12px;font-weight:800;transition:background .2s,transform .2s;}
.v7-header button.header-icon:hover {background:#ffffff26;transform:translateY(-1px);}
.v7-header button.header-icon.signout {margin-right:auto;border-color:#ffdac148;}
.shell {max-width:1240px;padding:28px 20px 70px;}
.v7-welcome,.gallery-cover {background:linear-gradient(125deg,#102b1d,#215c34 68%,#357e43);position:relative;display:flex;align-items:center;justify-content:space-between;gap:25px;border-radius:26px;color:white;overflow:hidden;box-shadow:0 18px 45px #174c2925;padding:30px clamp(22px,4vw,42px);margin-bottom:27px;}
.v7-welcome::before,.gallery-cover::before {content:'';position:absolute;inset:-100px auto auto -90px;width:330px;height:330px;border:45px solid #d9eda30d;border-radius:50%;pointer-events:none;}
.v7-welcome >*,.gallery-cover >* {position:relative;z-index:1;}
.v7-welcome h2,.gallery-cover h2 {font-size:clamp(23px,3.6vw,36px);color:#fff;line-height:1.5;margin:8px 0 4px;}
.v7-welcome p,.gallery-cover p {color:#e1eddd;margin:0 0 13px;}
.eyebrow {color:#ffe6a4;font-size:12px;letter-spacing:.2px;font-weight:900;}
.home-role {border-color:#cce6a069;background:#ffffff1b;color:#eaffd7;}
.welcome-emblem {width:clamp(96px,13vw,156px);height:clamp(96px,13vw,156px);object-fit:contain;filter:drop-shadow(0 14px 20px #0005);}
.heading h2 {font-weight:800;}
.card {border:1px solid #dcebd6;border-radius:22px;box-shadow:var(--v7-shadow);}
.card.click {padding:25px 22px;min-height:160px;position:relative;}
.card.click::after {content:'↖';position:absolute;left:20px;top:20px;border-radius:12px;background:#eff7e9;color:#51834c;width:29px;height:29px;display:grid;place-items:center;font-weight:800;font-size:16px;}
.card .symbol {display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:#edf7e8;font-size:29px;line-height:1;margin-bottom:13px;}
.card .symbol:has(img) {background:#e3f2d9;}
.card-emblem {width:46px;height:46px;margin:auto;}
.card.click h3 {font-size:16px;margin:0 0 3px;line-height:1.7;}
.card.click p {font-size:12px;}
.panel,.news-section {border-radius:23px;box-shadow:var(--v7-shadow);}
.admin-spotlight {width:100%;display:flex;gap:14px;align-items:center;text-align:right;border-radius:20px;border:1px solid #e7d59a;background:linear-gradient(115deg,#fff9df,#fffdf1);margin:0 0 22px;padding:17px 21px;color:#5d4921;box-shadow:0 10px 22px #6047100c;}
.admin-spotlight-icon {font-size:31px;display:grid;place-items:center;width:55px;height:55px;border-radius:17px;background:#f7e7b4;}
.admin-spotlight > span:nth-child(2) {flex:1;display:grid;gap:3px;}
.admin-spotlight strong {font-size:16px;}
.admin-spotlight small {font-size:12px;color:#766746;}
.admin-spotlight b {font-size:23px;}
.stat-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:12px 0 23px;}
.stat-tile {display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:1px solid #daebd6;background:#fff;border-radius:20px;padding:20px;box-shadow:var(--v7-shadow);}
.stat-tile span {font-weight:800;color:#376947;}
.stat-tile strong {font-size:34px;line-height:1.2;color:#154d2c;}
.stat-tile small {color:#6b836d;}
.filters-line {display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;align-items:end;margin:17px 0;}
.admin-member-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.admin-member-card {border:1px solid #dcebd8;background:#fcfefb;border-radius:17px;padding:14px;display:flex;align-items:center;gap:13px;min-width:0;}
.admin-member-card>div:nth-child(2) {flex:1;min-width:0;}
.admin-member-card h3 {margin:0;font-size:14px;overflow-wrap:anywhere;}
.admin-member-card p {color:#718272;font-size:12px;margin:2px 0 5px;}
.admin-member-card .avatar {width:48px;height:48px;border-radius:14px;flex:none;}
.admin-member-card .btn {white-space:nowrap;}
.settings-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;align-items:stretch;}
.settings-grid .panel {margin:0;}
.settings-profile {display:flex;align-items:center;gap:18px;}
.settings-avatar {width:76px;height:76px;font-size:31px;border-radius:23px;}
.settings-profile p {color:#627d6b;margin:0 0 8px;}
/* Media gallery */
.gallery-cover {margin:0 0 23px;padding-block:28px;}
.gallery-cover-art {font-size:clamp(55px,10vw,95px);filter:drop-shadow(0 10px 14px #081a1280);}
.gallery-stat {display:inline-flex;padding:5px 12px;background:#ffffff2a;border:1px solid #ffffff36;border-radius:999px;font-size:12px;font-weight:800;}
.gallery-toolbar {display:grid;grid-template-columns:minmax(0,2fr) minmax(160px,1fr) auto;gap:15px;align-items:end;background:#fff;border:1px solid #e0ebd9;border-radius:19px;padding:14px 17px;margin-bottom:18px;}
.gallery-toolbar strong {padding-bottom:14px;white-space:nowrap;color:#50765a;}
.v7-gallery {grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;}
.v7-gallery .memory-card {border-radius:21px;box-shadow:var(--v7-shadow);transition:transform .15s,border-color .15s;}
.v7-gallery .memory-card:hover {transform:translateY(-4px);border-color:#b4d7a7;}
.memory-open {position:relative;padding:0;display:block;cursor:zoom-in;border:0;width:100%;background:#e9f2e5;text-align:right;}
.memory-open .memory-image {height:auto;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(145deg,#e6efe1,#cfddcc);}
.memory-open .memory-image img {transition:transform .35s;}
.memory-open:hover img {transform:scale(1.055);}
.memory-expand {position:absolute;bottom:12px;right:12px;padding:5px 9px;border-radius:9px;background:#081d14b9;color:white;font-size:11px;font-weight:800;}
.memory-text {padding:17px;}
.memory-text p {line-height:1.7;}
.memory-text small {color:#7b907c;}
.lightbox-open {overflow:hidden;}
.gallery-lightbox {position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;padding:clamp(12px,2vw,24px);background:rgba(3,12,8,.97);color:#fff;}
.lightbox-top,.lightbox-foot {display:flex;align-items:center;gap:15px;max-width:1160px;width:100%;margin:auto;}
.lightbox-top {margin-block:0 9px;justify-content:space-between;}
.lightbox-stage {flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:1200px;margin:auto;}
.lightbox-visual {position:relative;display:grid;place-items:center;flex:1;min-width:0;height:100%;overflow:auto;}
#lightbox-image {max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;transition:transform .22s,opacity .15s;}
#lightbox-image.zoomed {transform:scale(1.6);cursor:zoom-out;}
#lightbox-loading {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0c281bd6;padding:10px 15px;border-radius:12px;pointer-events:none;}
.lightbox-btn,.lightbox-arrow {background:#ffffff1c;color:white;border:1px solid #ffffff38;border-radius:12px;padding:10px 15px;min-height:44px;}
.lightbox-arrow {font-size:23px;flex:0 0 auto;}
.lightbox-foot {flex-wrap:wrap;justify-content:center;text-align:center;padding-top:10px;margin-block:10px 0;}
.lightbox-foot p {flex:1;margin:0;min-width:200px;}
.lightbox-foot small {color:#bfd6c4;}
/* Chat */
.chat-panel {overflow:hidden;padding:0;}
.chat-titlebar {padding:17px 22px;display:flex;align-items:center;gap:13px;background:linear-gradient(100deg,#153b28,#276a3e);color:white;}
.chat-room-symbol {width:50px;height:50px;border-radius:16px;background:#ffffff2a;display:grid;place-items:center;font-size:26px;}
.chat-titlebar >div:nth-child(2) {flex:1;}
.chat-titlebar h3 {color:white;margin:0;font-size:17px;}
.chat-titlebar p {font-size:12px;margin:3px 0 0;color:#d7ebd7;}
.chat-titlebar .badge {border-color:#bbd8a74d;background:#ffffff26;color:white;}
.chat-tools {display:flex;justify-content:space-between;align-items:end;padding:15px 20px;gap:10px;}
.chat-tools .field {flex:0 1 350px;}
.chat-tools input {min-height:42px;}
.v7-chat-log {margin:0 19px 14px;min-height:310px;height:min(54vh,550px);background:#edf5e8;border-color:#d7e8d4;border-radius:19px;padding:20px;gap:13px;}
.chat-day {align-self:center;margin:2px 0 0;}
.chat-day span {background:#d7e8d2;border-radius:999px;color:#527158;padding:5px 14px;font-size:11px;font-weight:800;}
.chat-bubble {max-width:min(82%,590px);padding:12px 15px 7px;border-radius:17px 17px 5px 17px;box-shadow:0 4px 10px #1b4a1d0b;}
.chat-bubble.mine {background:#dcf1d7;border-color:#b4d9b2;border-radius:17px 17px 17px 5px;}
.chat-meta {gap:7px;}
.chat-meta strong {font-size:12px;color:#27563b;}
.chat-meta time {margin-right:auto;color:#7a907e;font-size:10px;}
.chat-mini-avatar {width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#bad8a9;color:#164429;font-size:9px;font-weight:900;}
.chat-bubble p {margin:7px 0 8px;line-height:1.95;font-size:13px;}
.chat-message-actions {display:flex;gap:11px;flex-wrap:wrap;border-top:1px solid #59796418;padding-top:5px;}
.chat-action {background:none!important;border:0!important;padding:4px 1px!important;font-size:11px!important;color:#5e8062!important;min-height:23px!important;box-shadow:none!important;}
.chat-action:hover {color:#164c2b!important;text-decoration:underline;}
.chat-action.danger-text {color:#a24646!important;}
.chat-reply-bar {margin:0 20px 11px;padding:11px 13px;background:#f5f9ee;border-right:4px solid #389055;border-radius:11px;display:flex;gap:12px;align-items:center;justify-content:space-between;}
.chat-reply-bar span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-quick-emoji {display:flex;gap:6px;padding:0 20px 10px;}
.chat-quick-emoji button {background:#f1f7ea;border:1px solid #dbebd4;border-radius:12px;width:40px;height:36px;font-size:18px;}
.chat-panel form {margin:0 20px 14px;}
.chat-compose .field {flex:1;}
.chat-compose textarea {min-height:75px;max-height:200px;}
.chat-panel>.hint {margin:0 20px 20px;}
/* Games */
.quiz-filters {display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:13px;}
.quiz-question-meta {display:flex;justify-content:space-between;align-items:center;gap:12px;}
.quiz-explanation {border:1px solid #aace9c;background:#ecf8e8;border-radius:14px;padding:14px 16px;margin:15px 0 0;color:#1b5932;}
.quiz-explanation p {margin:7px 0 6px;font-size:13px;font-weight:600;}
.quiz-explanation small {color:#5e785f;}
/* Dark appearance — presentation-only preference */
:root[data-theme="dark"] {color-scheme:dark;--bg:#0d1d16;--paper:#182b21;--ink:#e6f5e9;--line:#325041;--muted:#a6bcaa;--sky:#1a392a;--v7-shadow:0 14px 40px #0003;}
:root[data-theme="dark"] body {background:linear-gradient(#10271b,#0e1d16);color:#e9f3e7;}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .card,:root[data-theme="dark"] .news-section,:root[data-theme="dark"] .gallery-toolbar,:root[data-theme="dark"] .stat-tile,:root[data-theme="dark"] .admin-member-card,:root[data-theme="dark"] .memory-card,:root[data-theme="dark"] .item {background:#192d22;color:#ecf4e6;border-color:#33513d;}
:root[data-theme="dark"] .card h3,:root[data-theme="dark"] .heading h2,:root[data-theme="dark"] .panel h3,:root[data-theme="dark"] .memory-text p,:root[data-theme="dark"] .item-body h3,:root[data-theme="dark"] .stat-tile strong,:root[data-theme="dark"] .news-item h3 {color:#e2f6e5;}
:root[data-theme="dark"] .card.click::after,:root[data-theme="dark"] .card .symbol {background:#294b35;color:#b6dc9e;}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea {background:#102319;border-color:#44654a;color:#e7f4df;}
:root[data-theme="dark"] .btn.alt {background:#193c2b;color:#d3f3c8;}
:root[data-theme="dark"] .note {background:#443b23;color:#fff0ba;border-color:#786841;}
:root[data-theme="dark"] .muted,:root[data-theme="dark"] .hint,:root[data-theme="dark"] .heading p,:root[data-theme="dark"] .card p,:root[data-theme="dark"] .admin-member-card p {color:#b0c6b2;}
:root[data-theme="dark"] .chat-bubble {background:#294034;border-color:#3b5644;}
:root[data-theme="dark"] .chat-bubble.mine {background:#244d35;}
:root[data-theme="dark"] .v7-chat-log {background:#10271b;border-color:#34503d;}
:root[data-theme="dark"] .chat-meta strong {color:#c7eacb;}
:root[data-theme="dark"] .quiz-choice {background:#254533;color:#dbf2da;}
:root[data-theme="dark"] .quiz-explanation {background:#25482f;color:#d0edd4;}
:root[data-theme="dark"] .quiz-explanation small {color:#b9d4bc;}
:root[data-theme="dark"] .admin-spotlight {background:#443a22;color:#ffedb1;border-color:#806b3b;}
:root[data-theme="dark"] .admin-spotlight small {color:#ddc994;}
:root[data-theme="dark"] .news-item {background:#22382a;border-color:#3e5742;}
:root[data-theme="dark"] .chat-quick-emoji button,:root[data-theme="dark"] .chat-reply-bar {background:#213d2a;color:#e7f4df;border-color:#476e4b;}
:root[data-reduce-motion="on"] *, :root[data-reduce-motion="on"] *::before,:root[data-reduce-motion="on"] *::after {animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
@media (max-width:900px) {
 .v7-header .hero-inner {align-items:flex-start;}
 .v7-header .header-user {margin-right:0;}
 .header-toolbar-inner {gap:6px;}
 .header-toolbar button.header-icon {flex:1 1 auto;}
 .admin-member-grid {grid-template-columns:1fr;}
}
@media (max-width:760px) {
 .v7-header {padding:14px 13px 0;border-radius:0 0 23px 23px;border-bottom:3px solid #b7e57c;}
 .v7-header .hero-inner {display:grid;grid-template-columns:1fr;gap:9px;}
 .v7-header .identity {text-align:right;align-items:center;}
 .v7-header .mark {width:55px;height:55px;flex-basis:55px;border-radius:50%;}
 .v7-header .identity h1 {font-size:17px;}
 .v7-header .identity p {font-size:11px;}
 .header-user {padding:6px 9px;margin:0;max-width:100%;align-self:start;width:fit-content;}
 .header-avatar {width:37px;height:37px;}
 .header-toolbar {margin-top:9px;padding:8px 0 9px;overflow-x:auto;scrollbar-width:none;}
 .header-toolbar-inner {width:max-content;min-width:100%;flex-wrap:nowrap;gap:6px;}
 .v7-header button.header-icon {min-height:36px;padding:6px 9px;font-size:11px;}
 .v7-header button.header-icon.signout {margin-right:0;}
 .shell {padding:17px 12px calc(105px + env(safe-area-inset-bottom));}
 .v7-welcome,.gallery-cover {padding:22px;border-radius:20px;gap:10px;margin-bottom:18px;}
 .v7-welcome h2,.gallery-cover h2 {font-size:23px;}
 .v7-welcome p,.gallery-cover p {font-size:12px;line-height:1.85;}
 .welcome-emblem {width:84px;height:84px;}
 .gallery-cover-art {font-size:50px;}
 .heading h2 {font-size:19px;}
 .card.click {padding:15px 13px;min-height:141px;}
 .card.click::after {left:10px;top:11px;font-size:13px;width:23px;height:23px;}
 .card .symbol {width:42px;height:42px;font-size:25px;border-radius:13px;margin-bottom:8px;}
 .card-emblem {width:37px;height:37px;}
 .card.click h3 {font-size:13px;}
 .card.click p {font-size:11px;line-height:1.6;}
 .stat-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
 .stat-tile {padding:11px 8px;border-radius:14px;}
 .stat-tile span {font-size:10px;line-height:1.5;}
 .stat-tile strong {font-size:25px;}
 .stat-tile small {font-size:10px;}
 .filters-line {grid-template-columns:1fr;}
 .admin-member-grid {grid-template-columns:1fr;}
 .admin-member-card {flex-wrap:wrap;}
 .settings-grid {grid-template-columns:1fr;}
 .gallery-toolbar {grid-template-columns:1fr 1fr;gap:10px;padding:12px;}
 .gallery-toolbar .field:first-child {grid-column:1/-1;}
 .gallery-toolbar strong {align-self:center;padding:0;font-size:12px;}
 .v7-gallery {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .memory-text {padding:12px;}
 .memory-text p {font-size:12px;}
 .memory-expand {font-size:10px;}
 .chat-panel {padding:0;}
 .chat-titlebar {padding:13px;}
 .chat-titlebar .badge {display:none;}
 .chat-tools {display:flex;flex-direction:column;align-items:stretch;padding:12px;}
 .chat-tools .field {flex:none;width:100%;}
 .v7-chat-log {height:min(52dvh,450px);min-height:230px;margin:0 8px 12px;padding:13px 9px;}
 .chat-bubble {max-width:92%;}
 .chat-panel form {margin:0 12px 12px;}
 .chat-quick-emoji {padding:0 12px 10px;}
 .chat-reply-bar {margin:0 12px 12px;}
 .chat-compose {grid-template-columns:minmax(0,1fr) auto;gap:7px;}
 .chat-compose .btn {align-self:end;padding-inline:10px;}
 .quiz-filters {grid-template-columns:1fr;}
 .lightbox-arrow {padding:8px 9px;font-size:18px;}
 .lightbox-foot {font-size:12px;}
}
@media (max-width:420px) and (min-width:355px){.grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}.card.click{min-height:148px;}}
@media (max-width:354px) {.v7-gallery{grid-template-columns:1fr}.chat-compose{grid-template-columns:1fr}.header-user{max-width:100%}.welcome-emblem{width:66px;height:66px}}

/* V7 mobile navigation: five equally accessible destinations. */
@media (max-width:760px) {
 .header-toolbar {overflow:visible;}
 .header-toolbar-inner {width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
 .v7-header button.header-icon {width:100%;white-space:normal;line-height:1.4;text-align:center;font-size:10px;padding:7px 4px;min-height:36px;}
 .mobile-tabbar {grid-template-columns:repeat(5,minmax(0,1fr));}
 .mobile-tabbar button {font-size:10px;}
 .mobile-tabbar .tab-icon {font-size:21px;}
}

/* V7.1: Offboarding is available only in admin-controlled UI. */
.admin-member-card { flex-wrap:wrap; }
.member-access-controls { flex:0 0 100%; min-width:0; border-top:1px solid #dcebd8; padding-top:10px; }
.member-access-controls .row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; }
.member-access-controls .field { flex:1 1 190px; min-width:180px; }
.member-access-controls small { display:block; margin-top:5px; line-height:1.7; overflow-wrap:anywhere; }
:root[data-theme="dark"] .member-access-controls { border-color:#33513d; }