/* SELAM ICU — style.css | Mobile-first | Dark default | Ethiopian theme */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── DARK THEME (default) ── */
:root{
  --gold:#F5A623;--gold-dim:#b87c18;--gold-glow:rgba(245,166,35,.15);
  --bg:#07090D;--bg2:#0C1018;--bg3:#111820;--bg4:#17202C;
  --border:rgba(245,166,35,.12);--border-hi:rgba(245,166,35,.38);
  --text:#DDE4EE;--muted:#8A9AB0;
  --green:#3DDB7E;--blue:#5BAAFF;--purple:#A78BFA;--red:#F87171;--orange:#FB923C;
  --r:10px;--trans:background .3s,color .3s,border-color .3s;
}

/* ── LIGHT THEME ── */
[data-theme=light]{
  --gold:#C48A12;--gold-dim:#A37510;--gold-glow:rgba(196,138,18,.12);
  --bg:#FBF7F0;--bg2:#F4EFE5;--bg3:#EDE7D9;--bg4:#E4DCC9;
  --border:rgba(196,138,18,.18);--border-hi:rgba(196,138,18,.42);
  --text:#1F1C18;--muted:#6A5E50;
  --green:#1A9A52;--blue:#2977CC;--purple:#7C5FCC;--red:#CC4444;--orange:#CC6820;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'DM Mono',monospace;font-size:14px;line-height:1.65;
  min-height:100vh;overflow-x:hidden;transition:var(--trans);
}

/* ── ATMOSPHERE ── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,rgba(245,166,35,.07) 0%,transparent 60%),
    radial-gradient(ellipse 40% 30% at 90% 80%,rgba(91,170,255,.04) 0%,transparent 50%);
  transition:background .3s;
}
[data-theme=light] body::before{
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,rgba(196,138,18,.06) 0%,transparent 60%),
    radial-gradient(ellipse 40% 30% at 90% 80%,rgba(41,119,204,.03) 0%,transparent 50%);
}

/* ── ETHIOPIAN CROSS DECORATION ── */
.eth-decor{
  position:fixed;top:50%;right:-70px;
  transform:translateY(-50%);
  width:300px;height:300px;
  color:var(--gold);opacity:.04;
  pointer-events:none;z-index:0;
  animation:eth-breathe 24s ease-in-out infinite;
}
[data-theme=light] .eth-decor{opacity:.05}
@keyframes eth-breathe{
  0%,100%{transform:translateY(-50%) rotate(0deg) scale(1)}
  33%{transform:translateY(-53%) rotate(10deg) scale(1.04)}
  66%{transform:translateY(-48%) rotate(-6deg) scale(.97)}
}

/* ── HEADER ── */
header{
  position:sticky;top:0;z-index:200;
  background:rgba(7,9,13,.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  height:60px;display:flex;align-items:center;
  padding:0 1rem;gap:.75rem;transition:background .3s,border-color .3s;
}
[data-theme=light] header{background:rgba(251,247,240,.94)}

/* ── LOGO ── */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-mark{
  width:36px;height:36px;background:var(--gold);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:800;font-size:18px;
  color:#000;letter-spacing:-1px;flex-shrink:0;
}
.logo-info{display:flex;flex-direction:column}
.logo-name{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;color:var(--gold);letter-spacing:3px;line-height:1}
.logo-tag{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:2px}

.header-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ── LIVE BADGE ── */
.live-badge{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--green);letter-spacing:1.5px;text-transform:uppercase}
.live-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── HEADER EMAIL ── */
.header-email{
  font-size:11px;color:var(--muted);letter-spacing:.5px;text-decoration:none;
  border:1px solid var(--border);border-radius:4px;padding:4px 10px;
  transition:color .2s,border-color .2s;display:none;
}
@media(min-width:420px){.header-email{display:inline-block}}
.header-email:hover{color:var(--gold);border-color:var(--border-hi)}

/* ── THEME TOGGLE ── */
.theme-btn{
  width:36px;height:36px;border:1px solid var(--border-hi);background:var(--bg3);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,border-color .2s;font-size:16px;
  line-height:1;flex-shrink:0;color:var(--text);
}
.theme-btn:hover{background:var(--gold-glow);border-color:var(--gold)}

/* ── BURGER ── */
.burger{
  width:36px;height:36px;border:1px solid var(--border-hi);background:var(--bg3);
  border-radius:8px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;cursor:pointer;transition:background .2s,border-color .2s;
  flex-shrink:0;
}
.burger:hover{background:var(--gold-glow);border-color:var(--gold)}
.burger span{display:block;width:16px;height:2px;background:var(--gold);border-radius:2px;transition:transform .3s,opacity .3s,width .3s;transform-origin:center}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;width:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── DRAWER OVERLAY ── */
.drawer-overlay{
  position:fixed;inset:0;z-index:190;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.drawer-overlay.open{opacity:1;pointer-events:all}

/* ── DRAWER ── */
.drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(300px,85vw);background:var(--bg2);
  border-left:1px solid var(--border-hi);z-index:195;
  padding:80px 1.5rem 2rem;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.drawer-section{
  font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;
  margin-bottom:10px;margin-top:24px;padding-bottom:6px;border-bottom:1px solid var(--border);
}
.drawer-section:first-child{margin-top:0}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;
  cursor:pointer;margin-bottom:3px;transition:background .15s,color .15s;
  color:var(--muted);font-size:13px;letter-spacing:.3px;border:1px solid transparent;
}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:var(--gold-glow);border-color:var(--border-hi);color:var(--gold)}
.nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}

/* ── TAB BAR ── */
.tab-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:150;
  background:rgba(7,9,13,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);display:flex;
  padding:0 4px env(safe-area-inset-bottom,8px);
  transition:background .3s;
}
[data-theme=light] .tab-bar{background:rgba(251,247,240,.97)}
.tab-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:8px 4px;cursor:pointer;border:none;background:none;
  color:var(--muted);font-family:'DM Mono',monospace;transition:color .2s;
  -webkit-tap-highlight-color:transparent;
}
.tab-btn.active{color:var(--gold)}
.tab-icon{font-size:18px;line-height:1}
.tab-label{font-size:10px;letter-spacing:.8px;text-transform:uppercase}
.tab-btn.active .tab-icon{filter:drop-shadow(0 0 6px rgba(245,166,35,.6))}

/* ── MAIN LAYOUT ── */
main{position:relative;z-index:1;padding:1.2rem 1rem 90px;max-width:900px;margin:0 auto}

/* ── PANEL TRANSITIONS ── */
.panel{display:none}
.panel.active{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── SECTION TITLES ── */
.sec-title{
  font-family:'Syne',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:10px;
  margin-bottom:1rem;margin-top:1.8rem;
}
.sec-title:first-child{margin-top:0}
.sec-title::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── HERO CARD ── */
.hero{
  background:var(--bg3);border:1px solid var(--border-hi);border-radius:var(--r);
  padding:1.6rem;position:relative;overflow:hidden;margin-bottom:1.5rem;
}
.hero::after{
  content:'S';position:absolute;right:-8px;bottom:-20px;
  font-family:'Syne',sans-serif;font-size:130px;font-weight:800;
  color:rgba(245,166,35,.05);pointer-events:none;line-height:1;
}
.hero-title{font-family:'Syne',sans-serif;font-size:clamp(1.6rem,7vw,2.4rem);font-weight:800;color:var(--gold);letter-spacing:-1px;line-height:1;margin-bottom:6px}
.hero-sub{font-size:12px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:1rem}
.domain-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(245,166,35,.08);border:1px solid var(--border-hi);
  border-radius:6px;padding:6px 14px;font-size:13px;color:var(--gold);margin-bottom:1.2rem;
}
.badge-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem}
.badge{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  padding:4px 10px;border-radius:4px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--muted);
}
[data-theme=light] .badge{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.benefits{display:flex;flex-wrap:wrap;gap:6px}
.benefit{
  display:flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--green);background:rgba(61,219,126,.07);border:1px solid rgba(61,219,126,.2);
  border-radius:20px;padding:5px 12px;
}
.benefit::before{content:'✓';font-size:11px}

/* ── SUBDOMAIN GRID ── */
.subdomain-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:600px){.subdomain-grid{grid-template-columns:repeat(3,1fr)}}
.sub-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:1rem;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;
}
.sub-card:hover{border-color:var(--gold);background:rgba(245,166,35,.05);transform:translateY(-2px)}
.sub-icon{font-size:20px;color:var(--gold);margin-bottom:8px}
.sub-url{font-size:11px;color:var(--gold);letter-spacing:.3px;margin-bottom:4px}
.sub-label{font-size:12px;color:var(--text);line-height:1.3;margin-bottom:4px}
.sub-role{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}

/* ── ROLE CARDS ── */
.roles-list{display:flex;flex-direction:column;gap:8px}
.role-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:1rem;display:flex;align-items:flex-start;gap:12px;
}
.role-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.role-name{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;margin-bottom:4px}
.role-perms{font-size:12px;color:var(--muted);line-height:1.7}

/* ── ECOSYSTEM CARDS ── */
.eco-card{background:var(--bg3);border-radius:var(--r);border:1px solid var(--border);overflow:hidden;margin-bottom:1rem}
.eco-head{padding:1rem 1.1rem;display:flex;align-items:center;gap:10px}
.eco-icon-box{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;font-family:'Syne',sans-serif;flex-shrink:0}
.eco-name{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;line-height:1.2}
.eco-sub{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.eco-badge{margin-left:auto;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:20px;flex-shrink:0}
.badge-active{background:rgba(61,219,126,.1);color:var(--green);border:1px solid rgba(61,219,126,.3)}
.badge-planned{background:rgba(167,139,250,.1);color:var(--purple);border:1px solid rgba(167,139,250,.3)}
.eco-apps{padding:0 .8rem .8rem;display:flex;flex-direction:column;gap:5px}
.app-row{
  background:var(--bg4);border:1px solid rgba(255,255,255,.05);
  border-radius:7px;padding:10px 12px;display:flex;align-items:center;gap:10px;
  cursor:pointer;transition:border-color .15s;
}
[data-theme=light] .app-row{border-color:rgba(0,0,0,.06)}
.app-row:hover{border-color:var(--border-hi)}
.app-emoji{font-size:16px}
.app-name{font-size:13px;color:var(--text)}
.app-url{font-size:11px;color:var(--gold);letter-spacing:.3px;margin-top:2px}

/* ── STUDIO CARD ── */
.studio-card{
  background:var(--bg3);border:1px solid var(--border-hi);border-radius:var(--r);
  padding:1.2rem;display:flex;align-items:center;gap:14px;margin-bottom:1rem;
  transition:border-color .2s;
}
.studio-card:hover{border-color:var(--purple)}
.studio-logo{
  width:46px;height:46px;background:rgba(167,139,250,.15);
  border:1px solid rgba(167,139,250,.35);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:800;font-size:22px;
  color:var(--purple);flex-shrink:0;
}
.studio-name{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--purple);margin-bottom:3px}
.studio-tag{font-size:11px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
.studio-detail{font-size:11px;color:var(--muted)}
.studio-link{
  margin-left:auto;font-size:12px;color:var(--purple);text-decoration:none;
  padding:7px 14px;border:1px solid rgba(167,139,250,.3);border-radius:6px;
  transition:background .2s;white-space:nowrap;flex-shrink:0;
}
.studio-link:hover{background:rgba(167,139,250,.12)}

/* ── GATEWAY BAR ── */
.gateway-bar{
  background:var(--bg4);border:1px solid var(--border-hi);border-radius:var(--r);
  padding:1rem 1.2rem;display:flex;align-items:center;gap:12px;margin-bottom:1.2rem;
}
.gateway-icon{font-size:24px;color:var(--gold)}
.gateway-label{font-size:11px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px}
.gateway-url{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--gold)}
.gateway-tag{margin-left:auto;font-size:11px;color:var(--muted);letter-spacing:.5px;text-align:right;line-height:1.5}

/* ── MICROSERVICES ── */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:600px){.services-grid{grid-template-columns:repeat(3,1fr)}}
.svc-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:1rem;position:relative;overflow:hidden;transition:transform .2s,border-color .2s;
}
.svc-card:hover{transform:translateY(-2px);border-color:var(--border-hi)}
.svc-top-bar{position:absolute;top:0;left:0;right:0;height:2px}
.svc-name{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;margin-bottom:8px;margin-top:4px}
.fn-tags{display:flex;flex-wrap:wrap;gap:4px}
.fn-tag{font-size:11px;padding:3px 7px;background:rgba(255,255,255,.05);border-radius:3px;color:var(--muted)}
[data-theme=light] .fn-tag{background:rgba(0,0,0,.05)}

/* ── MSG QUEUE ── */
.msg-queue{
  background:rgba(91,170,255,.04);border:1px dashed rgba(91,170,255,.25);
  border-radius:8px;padding:12px 16px;font-size:12px;color:var(--blue);
  letter-spacing:1px;text-align:center;margin:1rem 0;
}

/* ── DATA LAYER ── */
.data-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:480px){.data-grid{grid-template-columns:1fr 1fr}}
.db-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem}
.db-engine-label{font-size:11px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.db-name{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;margin-bottom:10px}
.schema-pills{display:flex;flex-wrap:wrap;gap:4px}
.pill{font-size:11px;padding:3px 9px;border-radius:3px;letter-spacing:.2px}
.pill-blue{background:rgba(91,170,255,.08);border:1px solid rgba(91,170,255,.2);color:var(--blue)}
.pill-red{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);color:var(--red)}

/* ── INFRASTRUCTURE ── */
.infra-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:480px){.infra-grid{grid-template-columns:repeat(4,1fr)}}
.infra-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:1rem;text-align:center;cursor:default;transition:border-color .2s,background .2s;
}
.infra-card:hover{border-color:var(--border-hi);background:rgba(245,166,35,.04)}
.infra-icon{font-size:22px;margin-bottom:8px}
.infra-name{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;margin-bottom:4px}
.infra-detail{font-size:11px;color:var(--muted);letter-spacing:.5px}

/* ── INTEGRATIONS ── */
.int-list{display:flex;flex-direction:column;gap:8px}
.int-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:1rem;display:flex;align-items:center;gap:12px;transition:border-color .2s;
}
.int-card:hover{border-color:var(--border-hi)}
.int-icon{font-size:22px;flex-shrink:0}
.int-type{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;margin-bottom:4px}
.int-detail{font-size:12px;color:var(--muted)}
.int-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.int-tag{font-size:11px;padding:3px 9px;background:rgba(245,166,35,.07);border:1px solid var(--border);border-radius:3px;color:var(--gold)}

/* ── DATA FLOW ── */
.flow-list{display:flex;flex-direction:column;gap:8px}
.flow-step{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:1.1rem 1.2rem;display:flex;align-items:center;gap:14px;
  transition:border-color .2s;cursor:default;
}
.flow-step:hover{border-color:var(--border-hi)}
.flow-num{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;line-height:1;color:rgba(245,166,35,.14);flex-shrink:0;width:44px}
.flow-text{font-size:13px;color:var(--text);line-height:1.5}
.flow-arrow{color:var(--gold);font-size:18px;opacity:.4;text-align:center;padding:2px 0}

/* ── LEGEND ── */
.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1rem}
.legend-item{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.9rem;display:flex;align-items:center;gap:10px}
.legend-line{flex-shrink:0;width:30px;height:0}
.legend-label{font-size:12px;color:var(--muted);letter-spacing:.3px}

/* ── SUMMARY GRID ── */
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1rem}
.sum-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:1rem}
.sum-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;margin-bottom:10px}
.sum-row{display:flex;align-items:center;gap:7px;font-size:12px;margin-bottom:8px}
.sum-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sum-count{margin-left:auto;font-size:11px;color:var(--muted)}

/* ── FOOTER ── */
.site-footer{
  position:relative;z-index:1;border-top:1px solid var(--border);
  background:var(--bg2);padding:1.4rem 1rem;
  padding-bottom:calc(1.4rem + 65px);transition:var(--trans);
}
.footer-inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.footer-logo{display:flex;align-items:center;gap:8px}
.footer-links{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;font-size:13px}
.footer-links a{color:var(--gold);text-decoration:none;letter-spacing:.3px}
.footer-links a:hover{text-decoration:underline}
.footer-sep{color:var(--border-hi)}
.footer-copy{font-size:11px;color:var(--muted);letter-spacing:.5px}
.footer-copy a{color:var(--muted);text-decoration:none}
.footer-copy a:hover{color:var(--gold)}

/* ── ETHIOPIAN FLAG STRIPE ── */
.eth-flag{display:flex;gap:5px;margin:6px 0;justify-content:center}
.eth-flag-stripe{width:28px;height:4px;border-radius:2px;animation:eth-stripe 2.5s ease-in-out infinite}
.eth-flag-stripe:nth-child(2){animation-delay:.25s}
.eth-flag-stripe:nth-child(3){animation-delay:.5s}
@keyframes eth-stripe{0%,100%{opacity:.6;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.15)}}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(245,166,35,.3);border-radius:10px}

/* ── RESPONSIVE: DESKTOP ── */
@media(min-width:900px){
  main{padding:1.5rem 1.5rem 2rem}
  .site-footer{padding-bottom:1.4rem}
  .tab-bar{display:none}
  header{padding:0 1.5rem;gap:1.2rem}
  .header-email{display:inline-block}
}