/* Flowmesh — App Distribution Platform */
/* Secure App Distribution Platform */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg:        #080c10;
  --bg2:       #0d1219;
  --bg3:       #111820;
  --surface:   #161e2a;
  --surface2:  #1c2636;
  --border:    #1e2d3d;
  --border2:   #263a50;
  --text:      #e2eaf4;
  --text2:     #8da4be;
  --text3:     #475d77;
  --accent:    #0ecad4;
  --accent2:   #0ab5be;
  --accent3:   #07939b;
  --accent-bg: rgba(14,202,212,.10);
  --accent-glow: rgba(14,202,212,.20);
  --green:     #22d3a8;
  --green-bg:  rgba(34,211,168,.10);
  --red:       #f06f6f;
  --red-bg:    rgba(240,111,111,.10);
  --yellow:    #f5c542;
  --yellow-bg: rgba(245,197,66,.10);
  --purple:    #9b7ff4;
  --purple-bg: rgba(155,127,244,.10);
  --orange:    #f4845f;
  --orange-bg: rgba(244,132,95,.10);
  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --shadow:    0 4px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 50px rgba(0,0,0,.6);
  --sidebar-w: 256px;
  --font:      'Sora', system-ui, sans-serif;
  --mono:      'IBM Plex Mono', monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14.5px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:#3fd8e0}
img{max-width:100%;display:block}
input,textarea,select,button{font-family:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* LAYOUT */
.app-layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto;overflow-x:hidden}
.sidebar::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(14,202,212,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(14,202,212,.03) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.sidebar-logo{padding:20px 18px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;position:relative}
.logo-mark{width:34px;height:34px;background:linear-gradient(135deg,var(--accent),#0670f0);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 16px rgba(14,202,212,.3)}
.logo-mark svg{width:18px;height:18px}
.logo-text{font-size:1.12rem;font-weight:800;letter-spacing:-0.03em;background:linear-gradient(90deg,var(--accent),#7ad4f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sidebar-nav{flex:1;padding:12px 10px}
.nav-label{font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:10px 10px 4px;margin-top:4px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:var(--radius-sm);color:var(--text2);font-weight:500;font-size:.85rem;transition:all .15s;margin-bottom:1px;letter-spacing:-.01em}
.nav-item:hover{background:var(--surface);color:var(--text)}
.nav-item.active{background:var(--accent-bg);color:var(--accent);box-shadow:inset 2px 0 0 var(--accent)}
.nav-item .icon{width:17px;text-align:center;font-size:.95rem;flex-shrink:0}
.sidebar-footer{padding:12px 10px;border-top:1px solid var(--border)}
.sidebar-cert{padding:8px 10px;margin-bottom:8px;background:rgba(14,202,212,.05);border:1px solid rgba(14,202,212,.12);border-radius:var(--radius-sm);font-size:.65rem;color:var(--text3);display:flex;align-items:center;gap:6px;line-height:1.5}
.sidebar-cert-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 6px var(--accent)}
.user-pill{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s}
.user-pill:hover{background:var(--surface)}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent3),#0670f0);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size:.7rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* MAIN */
.main-content{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{background:rgba(13,18,25,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 28px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-title{font-size:.93rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.breadcrumb{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--text3)}
.breadcrumb a{color:var(--text2)}
.breadcrumb a:hover{color:var(--text)}
.topbar-actions{display:flex;align-items:center;gap:8px}
.page-body{padding:26px;flex:1}

/* CARDS */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:border-color .2s}
.card:hover{border-color:var(--border2)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:.93rem;font-weight:700;color:var(--text);letter-spacing:-.01em}
.card-subtitle{font-size:.75rem;color:var(--text3);margin-top:2px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 14px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;cursor:pointer;border:none;transition:all .15s;text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.btn-primary{background:var(--accent);color:#080c10;box-shadow:0 0 12px rgba(14,202,212,.22)}
.btn-primary:hover{background:#12dce8;color:#080c10;box-shadow:0 0 20px rgba(14,202,212,.38);transform:translateY(-1px)}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid rgba(240,111,111,.18)}
.btn-danger:hover{background:rgba(240,111,111,.18)}
.btn-success{background:var(--green-bg);color:var(--green);border:1px solid rgba(34,211,168,.18)}
.btn-success:hover{background:rgba(34,211,168,.18)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface);color:var(--text)}
.btn-sm{padding:4px 10px;font-size:.75rem}
.btn-lg{padding:11px 22px;font-size:.95rem}
.btn-icon{padding:7px}
.btn-full{width:100%}

/* FORMS */
.form-group{margin-bottom:15px}
.form-label{display:block;font-size:.72rem;font-weight:700;color:var(--text2);margin-bottom:5px;letter-spacing:.03em;text-transform:uppercase}
.form-control{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 11px;color:var(--text);font-size:.865rem;transition:border-color .15s,box-shadow .15s;outline:none;font-family:var(--font)}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,202,212,.10)}
.form-control::placeholder{color:var(--text3)}
select.form-control{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23475d77' d='M5 7L1 3h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
textarea.form-control{resize:vertical;min-height:85px}
.form-hint{font-size:.72rem;color:var(--text3);margin-top:4px}
.form-error{font-size:.72rem;color:var(--red);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row.three{grid-template-columns:1fr 1fr 1fr}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:.69rem;font-weight:700;letter-spacing:.02em}
.badge-ios{background:rgba(0,122,255,.12);color:#4da6ff}
.badge-android{background:rgba(61,220,132,.12);color:#3ddc84}
.badge-web{background:var(--accent-bg);color:var(--accent)}
.badge-windows{background:rgba(0,163,238,.12);color:#00b8f0}
.badge-macos{background:rgba(255,149,0,.12);color:#ffaa33}
.badge-default{background:var(--surface);color:var(--text2)}
.badge-success{background:var(--green-bg);color:var(--green)}
.badge-warning{background:var(--yellow-bg);color:var(--yellow)}
.badge-danger{background:var(--red-bg);color:var(--red)}
.badge-neutral{background:var(--surface);color:var(--text2)}

/* TABLES */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.84rem}
thead th{padding:9px 14px;text-align:left;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);border-bottom:1px solid var(--border)}
tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text2)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface)}

/* ALERTS */
.alert{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;border-radius:var(--radius-sm);font-size:.84rem;margin-bottom:16px}
.alert-success{background:var(--green-bg);color:var(--green);border:1px solid rgba(34,211,168,.18)}
.alert-error{background:var(--red-bg);color:var(--red);border:1px solid rgba(240,111,111,.18)}
.alert-info{background:var(--accent-bg);color:var(--accent);border:1px solid rgba(14,202,212,.18)}
.alert-warning{background:var(--yellow-bg);color:var(--yellow);border:1px solid rgba(245,197,66,.18)}

/* STATS GRID */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:13px;margin-bottom:22px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:17px 19px;display:flex;align-items:center;gap:13px;transition:border-color .2s,box-shadow .2s}
.stat-card:hover{border-color:var(--accent);box-shadow:0 0 18px rgba(14,202,212,.06)}
.stat-icon{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.stat-value{font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--text);letter-spacing:-.03em}
.stat-label{font-size:.68rem;color:var(--text3);margin-top:2px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* APPS GRID */
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:13px}
.app-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:17px;display:flex;flex-direction:column;gap:11px;transition:border-color .2s,box-shadow .2s,transform .2s;text-decoration:none;color:inherit;position:relative;overflow:hidden}
.app-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),#0670f0);opacity:0;transition:opacity .2s}
.app-card:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-2px);color:inherit}
.app-card:hover::after{opacity:1}
.app-card-header{display:flex;align-items:flex-start;gap:11px}
.app-icon{width:46px;height:46px;border-radius:12px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;overflow:hidden}
.app-icon img{width:100%;height:100%;object-fit:cover}
.app-info{flex:1;min-width:0}
.app-name{font-size:.88rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.app-bundle{font-size:.7rem;color:var(--text3);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-card-stats{display:flex;gap:16px}
.app-stat{text-align:center}
.app-stat-num{font-size:.98rem;font-weight:800;color:var(--text);letter-spacing:-.02em}
.app-stat-label{font-size:.61rem;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.app-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border)}

/* BUILDS */
.build-item{display:flex;align-items:center;gap:11px;padding:12px 17px;border-bottom:1px solid var(--border);transition:background .15s;position:relative}
.build-item:last-child{border-bottom:none}
.build-item:hover{background:var(--surface)}
.build-version-badge{background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:5px 10px;text-align:center;min-width:58px;flex-shrink:0}
.build-version{font-size:.83rem;font-weight:700;color:var(--text);font-family:var(--mono)}
.build-number{font-size:.64rem;color:var(--text3)}
.build-info{flex:1;min-width:0}
.build-notes{font-size:.79rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build-meta{font-size:.71rem;color:var(--text3);margin-top:2px}
.build-actions{display:flex;align-items:center;gap:6px}

/* DROP ZONE */
.drop-zone{border:2px dashed var(--border2);border-radius:var(--radius);padding:34px 20px;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:var(--bg3)}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:rgba(14,202,212,.04);box-shadow:0 0 24px rgba(14,202,212,.08)}
.drop-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-zone-icon{font-size:2.2rem;margin-bottom:9px}
.drop-zone-title{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:3px}
.drop-zone-hint{font-size:.75rem;color:var(--text3)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);width:100%;max-width:530px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp .2s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header{padding:19px 21px 0;display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.modal-body{padding:17px 21px}
.modal-footer{padding:0 21px 19px;display:flex;gap:8px;justify-content:flex-end}
.btn-close{background:var(--surface);border:none;color:var(--text2);width:27px;height:27px;border-radius:7px;cursor:pointer;font-size:.95rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.btn-close:hover{background:var(--surface2);color:var(--text)}

/* SHARE URL */
.share-url-box{display:flex;gap:7px;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 11px;margin-bottom:10px;transition:border-color .15s}
.share-url-box:focus-within{border-color:var(--accent)}
.share-url-box input{flex:1;background:none;border:none;color:var(--text);font-family:var(--mono);font-size:.75rem;outline:none}

/* EMPTY STATE */
.empty-state{text-align:center;padding:52px 20px;color:var(--text3)}
.empty-state-icon{font-size:2.4rem;margin-bottom:13px;opacity:.4}
.empty-state-title{font-size:.92rem;font-weight:600;color:var(--text2);margin-bottom:6px}
.empty-state-desc{font-size:.8rem;color:var(--text3);max-width:270px;margin:0 auto 16px;line-height:1.6}

/* TABS */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:20px}
.tab{padding:8px 15px;font-size:.81rem;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;text-decoration:none;letter-spacing:-.01em}
.tab:hover{color:var(--text2)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* PROGRESS */
.progress{height:3px;background:var(--surface2);border-radius:2px;overflow:hidden;margin-top:7px}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#0670f0);border-radius:2px;transition:width .3s}

/* AUTH */
.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:22px;position:relative;overflow:hidden}
.auth-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(14,202,212,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(14,202,212,.04) 1px,transparent 1px);background-size:40px 40px;animation:meshMove 20s linear infinite}
.auth-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 15% 15%,rgba(14,202,212,.12) 0%,transparent 65%),radial-gradient(ellipse 45% 55% at 85% 85%,rgba(6,112,240,.10) 0%,transparent 65%)}
@keyframes meshMove{0%{background-position:0 0,0 0}100%{background-position:40px 40px,40px 40px}}
.auth-card{background:rgba(13,18,25,.92);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:36px;width:100%;max-width:405px;position:relative;z-index:1;box-shadow:var(--shadow-lg);backdrop-filter:blur(12px)}
.auth-logo{text-align:center;margin-bottom:24px}
.auth-logo-mark{width:46px;height:46px;background:linear-gradient(135deg,var(--accent),#0670f0);border-radius:13px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;box-shadow:0 0 28px rgba(14,202,212,.35)}
.auth-logo-mark svg{width:23px;height:23px}
.auth-logo-name{font-size:1.45rem;font-weight:800;letter-spacing:-.04em;background:linear-gradient(90deg,var(--accent),#7ad4f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-logo-tag{font-size:.73rem;color:var(--text3);margin-top:2px}
.auth-title{font-size:1.12rem;font-weight:700;margin-bottom:4px;letter-spacing:-.02em}
.auth-sub{font-size:.8rem;color:var(--text3);margin-bottom:20px}
.auth-footer{text-align:center;margin-top:16px;font-size:.8rem;color:var(--text3)}
.auth-trust{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap}
.trust-badge{display:flex;align-items:center;gap:5px;font-size:.63rem;color:var(--text3);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.trust-badge .dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green)}

/* INSTALL PAGE */
.install-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:22px}
.install-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:30px;width:100%;max-width:430px;text-align:center;box-shadow:var(--shadow-lg)}
.install-app-icon{width:74px;height:74px;border-radius:20px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:2.4rem;margin:0 auto 13px;overflow:hidden}
.install-app-name{font-size:1.42rem;font-weight:800;letter-spacing:-.03em;margin-bottom:3px}
.install-version{font-size:.8rem;color:var(--text3);margin-bottom:16px}
.install-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.install-meta-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px}
.install-meta-val{font-size:.88rem;font-weight:700;color:var(--text)}
.install-meta-key{font-size:.65rem;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}
.release-notes{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px;text-align:left;margin-bottom:18px;font-size:.8rem;color:var(--text2);max-height:130px;overflow-y:auto;line-height:1.7}
.install-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:var(--radius-sm);background:var(--accent);color:#080c10;font-size:.93rem;font-weight:700;cursor:pointer;border:none;text-decoration:none;transition:all .15s;margin-bottom:8px;box-shadow:0 0 16px rgba(14,202,212,.22);letter-spacing:-.01em}
.install-btn:hover{background:#12dce8;transform:translateY(-1px);box-shadow:0 0 24px rgba(14,202,212,.38);color:#080c10}

/* SEARCH */
.search-box{display:flex;align-items:center;gap:7px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 11px;transition:border-color .15s}
.search-box:focus-within{border-color:var(--accent)}
.search-box input{background:none;border:none;color:var(--text);font-size:.83rem;outline:none;width:200px}
.search-box input::placeholder{color:var(--text3)}

/* TOGGLE */
.toggle{position:relative;display:inline-block;width:38px;height:21px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--surface2);border-radius:10px;transition:.2s;cursor:pointer;border:1px solid var(--border)}
.toggle-slider::before{content:'';position:absolute;width:15px;height:15px;left:2px;bottom:2px;background:var(--text3);border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-slider{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px rgba(14,202,212,.3)}
.toggle input:checked+.toggle-slider::before{transform:translateX(17px);background:#080c10}

/* DIVIDER */
.divider{display:flex;align-items:center;gap:10px;color:var(--text3);font-size:.74rem;margin:15px 0}
.divider::before,.divider::after{content:'';flex:1;border-top:1px solid var(--border)}

/* COPY TOAST */
#copyToast{position:fixed;bottom:22px;right:22px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:9px 14px;font-size:.8rem;color:var(--green);z-index:9999;opacity:0;transform:translateY(6px);transition:all .2s;pointer-events:none;font-weight:600}
#copyToast.show{opacity:1;transform:translateY(0)}

/* CERT BANNER */
.cert-banner{display:flex;align-items:center;gap:8px;padding:7px 11px;background:rgba(34,211,168,.06);border:1px solid rgba(34,211,168,.14);border-radius:var(--radius-sm);font-size:.7rem;color:var(--text3);margin-bottom:14px}
.cert-banner strong{color:var(--green)}
.cert-banner-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);flex-shrink:0}

/* PAGE FOOTER */
.page-footer{padding:16px 26px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.7rem;color:var(--text3)}
.footer-certs{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer-cert{display:flex;align-items:center;gap:5px}
.footer-cert .dot{width:5px;height:5px;border-radius:50%;background:var(--green)}

/* RESPONSIVE */
@media(max-width:900px){.sidebar{display:none}.main-content{margin-left:0}.topbar{padding:0 16px}.page-body{padding:14px}.form-row{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.apps-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr}.auth-card{padding:24px 18px}}

/* UTILS */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.text-sm{font-size:.79rem}.text-xs{font-size:.69rem}.text-muted{color:var(--text3)}.text-accent{color:var(--accent)}.text-green{color:var(--green)}.text-red{color:var(--red)}
.font-mono{font-family:var(--mono)}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hidden{display:none!important}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME
   Applied when: html[data-theme="light"]
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:        #f0f4f8;
  --bg2:       #ffffff;
  --bg3:       #f5f8fb;
  --surface:   #edf1f7;
  --surface2:  #e4eaf3;
  --border:    #d5dce8;
  --border2:   #bcc8d8;

  --text:      #0f1923;
  --text2:     #3d5068;
  --text3:     #7a93ab;

  --accent:    #0098a6;
  --accent2:   #00838f;
  --accent3:   #006b75;
  --accent-bg: rgba(0,152,166,.10);
  --accent-glow: rgba(0,152,166,.18);

  --green:     #0a9e74;
  --green-bg:  rgba(10,158,116,.10);
  --red:       #d94f4f;
  --red-bg:    rgba(217,79,79,.10);
  --yellow:    #c48a00;
  --yellow-bg: rgba(196,138,0,.10);
  --purple:    #6e4fcf;
  --purple-bg: rgba(110,79,207,.10);
  --orange:    #c75c30;
  --orange-bg: rgba(199,92,48,.10);

  --shadow:    0 2px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
}

/* Body bg in light mode */
[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

/* Sidebar */
[data-theme="light"] .sidebar {
  background: #ffffff;
  border-right-color: var(--border);
}
[data-theme="light"] .sidebar::before {
  background-image:
    linear-gradient(rgba(0,152,166,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,152,166,.04) 1px, transparent 1px);
}

/* Topbar */
[data-theme="light"] .topbar {
  background: rgba(255,255,255,.92);
  border-bottom-color: var(--border);
}

/* Cards */
[data-theme="light"] .card {
  background: #ffffff;
  border-color: var(--border);
}
[data-theme="light"] .card:hover { border-color: var(--border2); }

/* Stat cards */
[data-theme="light"] .stat-card {
  background: #ffffff;
  border-color: var(--border);
}

/* App cards */
[data-theme="light"] .app-card {
  background: #ffffff;
  border-color: var(--border);
}
[data-theme="light"] .app-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* Build items */
[data-theme="light"] .build-item:hover { background: var(--surface); }
[data-theme="light"] .build-version-badge {
  background: var(--surface2);
  border-color: var(--border);
}

/* Buttons */
[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0,152,166,.20);
}
[data-theme="light"] .btn-primary:hover {
  background: var(--accent2);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0,152,166,.30);
}
[data-theme="light"] .btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .btn-secondary:hover {
  background: var(--surface2);
  border-color: var(--border2);
}
[data-theme="light"] .btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text2);
}
[data-theme="light"] .btn-ghost:hover {
  background: var(--surface);
  color: var(--text);
}

/* Forms */
[data-theme="light"] .form-control {
  background: #ffffff;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,152,166,.12);
}

/* Nav items */
[data-theme="light"] .nav-item { color: var(--text2); }
[data-theme="light"] .nav-item:hover { background: var(--surface); color: var(--text); }
[data-theme="light"] .nav-item.active {
  background: var(--accent-bg);
  color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Sidebar footer */
[data-theme="light"] .sidebar-footer { border-top-color: var(--border); }
[data-theme="light"] .sidebar-cert {
  background: rgba(0,152,166,.06);
  border-color: rgba(0,152,166,.14);
}
[data-theme="light"] .user-pill:hover { background: var(--surface); }

/* Logo text gradient */
[data-theme="light"] .logo-text {
  background: linear-gradient(90deg, var(--accent), #0056d6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tables */
[data-theme="light"] thead th { color: var(--text3); border-bottom-color: var(--border); }
[data-theme="light"] tbody td { border-bottom-color: var(--border); color: var(--text2); }
[data-theme="light"] tbody tr:hover td { background: var(--surface); }

/* Badges */
[data-theme="light"] .badge-neutral { background: var(--surface2); color: var(--text2); }

/* Tabs */
[data-theme="light"] .tabs { border-bottom-color: var(--border); }
[data-theme="light"] .tab { color: var(--text3); }
[data-theme="light"] .tab:hover { color: var(--text2); }
[data-theme="light"] .tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Modals */
[data-theme="light"] .modal {
  background: #ffffff;
  border-color: var(--border2);
}
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,.4); }
[data-theme="light"] .btn-close { background: var(--surface); color: var(--text2); }
[data-theme="light"] .btn-close:hover { background: var(--surface2); color: var(--text); }

/* Drop zone */
[data-theme="light"] .drop-zone {
  border-color: var(--border2);
  background: var(--bg3);
}
[data-theme="light"] .drop-zone:hover,
[data-theme="light"] .drop-zone.dragover {
  border-color: var(--accent);
  background: rgba(0,152,166,.04);
}

/* Share URL box */
[data-theme="light"] .share-url-box {
  background: var(--bg3);
  border-color: var(--border);
}

/* Progress bar */
[data-theme="light"] .progress { background: var(--surface2); }

/* Toggle */
[data-theme="light"] .toggle-slider { background: var(--surface2); border-color: var(--border); }
[data-theme="light"] .toggle input:checked + .toggle-slider {
  background: var(--accent);
  border-color: var(--accent);
}
[data-theme="light"] .toggle input:checked + .toggle-slider::before { background: #ffffff; }

/* Auth pages */
[data-theme="light"] .auth-wrapper { background: #eef2f7; }
[data-theme="light"] .auth-bg {
  background-image:
    linear-gradient(rgba(0,152,166,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,152,166,.05) 1px, transparent 1px);
}
[data-theme="light"] .auth-bg::before {
  background:
    radial-gradient(ellipse 55% 45% at 15% 15%, rgba(0,152,166,.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 85% 85%, rgba(6,86,180,.08) 0%, transparent 65%);
}
[data-theme="light"] .auth-card {
  background: rgba(255,255,255,.96);
  border-color: var(--border2);
}

/* Install page */
[data-theme="light"] .install-page { background: #eef2f7; }
[data-theme="light"] .install-card {
  background: #ffffff;
  border-color: var(--border2);
}
[data-theme="light"] .install-app-icon { background: var(--surface2); }
[data-theme="light"] .install-meta-item { background: var(--bg3); border-color: var(--border); }
[data-theme="light"] .release-notes { background: var(--bg3); border-color: var(--border); }
[data-theme="light"] .install-btn { color: #ffffff; }

/* Page footer */
[data-theme="light"] .page-footer {
  background: #ffffff;
  border-top-color: var(--border);
}

/* Cert banner */
[data-theme="light"] .cert-banner {
  background: rgba(10,158,116,.06);
  border-color: rgba(10,158,116,.16);
}

/* Copy toast */
[data-theme="light"] #copyToast {
  background: #ffffff;
  border-color: var(--border2);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* Alerts */
[data-theme="light"] .alert-success { background: rgba(10,158,116,.08); border-color: rgba(10,158,116,.20); }
[data-theme="light"] .alert-error   { background: rgba(217,79,79,.08);  border-color: rgba(217,79,79,.20); }
[data-theme="light"] .alert-info    { background: rgba(0,152,166,.08);  border-color: rgba(0,152,166,.20); }
[data-theme="light"] .alert-warning { background: rgba(196,138,0,.08);  border-color: rgba(196,138,0,.20); }

/* Sidebar plan pill */
[data-theme="light"] #planPill { background: var(--surface); border-color: var(--border); }

/* Build dropdown (fix for light mode too) */
[data-theme="light"] .build-dropdown-portal {
  background: #ffffff;
  border-color: var(--border2);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border2); }

/* Theme toggle button contrast in light */
[data-theme="light"] #themeToggle { border-color: var(--border); }