:root { color-scheme: dark; font-family: Inter, "Avenir Next", system-ui, sans-serif; --navy:#06141d; --panel:#0d202a; --line:#25404a; --teal:#51ddc1; --cyan:#56c7f2; --amber:#ffc45c; --ink:#e8f3f5; --muted:#9bb1b9; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 75% -10%,#123b44 0,transparent 34%),linear-gradient(145deg,#071720,#081117 60%,#061018); }
button,input { font:inherit; }
.app-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,72px); border-bottom:1px solid rgba(130,219,215,.15); background:rgba(4,16,23,.82); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; }
.brand img { width:52px; height:52px; object-fit:contain; }
.brand span { display:flex; flex-direction:column; }
.brand strong { font-size:22px; letter-spacing:-.7px; }
.brand em { color:var(--teal); font-style:normal; }
.brand-version { display:inline-block; margin-left:5px; padding:2px 5px; border:1px solid rgba(81,221,193,.28); border-radius:999px; color:#9ae8d4; font-size:8px; vertical-align:middle; }
.brand small { margin-top:4px; color:#87a9b2; font-size:7px; letter-spacing:1.7px; }
.contract { display:flex; align-items:center; gap:8px; color:#a9bec5; font-size:11px; }
.contract i { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 5px rgba(81,221,193,.12); }
main { width:min(1320px,calc(100% - 36px)); margin:auto; padding:54px 0 80px; }
.hero { min-height:310px; display:flex; align-items:center; justify-content:space-between; gap:35px; padding:15px 4vw 42px; }
.hero > div { max-width:760px; }
.hero > img { width:min(330px,31vw); filter:drop-shadow(0 28px 50px rgba(0,0,0,.38)); }
.eyebrow { margin:0 0 9px; color:var(--teal); font-size:9px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(42px,6.3vw,82px); line-height:.94; letter-spacing:-4px; }
h1 span { color:var(--cyan); }
.hero p:last-child { max-width:720px; margin:24px 0 0; color:var(--muted); font-size:15px; line-height:1.65; }
.import-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.source-card,.package-card { border:1px solid var(--line); border-radius:18px; background:linear-gradient(155deg,rgba(15,39,49,.96),rgba(7,23,31,.96)); box-shadow:0 24px 60px rgba(0,0,0,.18); }
.source-card { min-height:305px; display:flex; flex-direction:column; align-items:flex-start; padding:25px; }
.source-card.featured { border-color:#357f7b; box-shadow:inset 0 1px rgba(160,255,239,.08),0 25px 70px rgba(0,0,0,.23); }
.card-icon { width:43px; height:43px; display:grid; place-items:center; margin-bottom:20px; border:1px solid #35545d; border-radius:12px; color:var(--cyan); background:#102832; font-size:24px; }
h2 { margin:0; font-size:22px; letter-spacing:-.6px; }
.source-card > p:not(.eyebrow) { min-height:62px; margin:12px 0 20px; color:var(--muted); font-size:12px; line-height:1.55; }
.source-card code { color:#d9f8f1; }
.source-card[hidden] { display:none; }
.zero-upload-note { margin-top:12px; color:#8de9d5; font:750 8px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.25px; }
.button { min-height:43px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #3a5a64; border-radius:10px; padding:0 16px; color:var(--ink); background:#142d37; font-size:11px; font-weight:760; cursor:pointer; }
.button:hover { border-color:#67c9c0; background:#193b43; }
.button.primary { border:0; color:#05221f; background:var(--teal); box-shadow:0 8px 24px rgba(81,221,193,.17); }
.button.primary:hover { background:#73ecd4; }
.button.is-disabled { opacity:.48; cursor:wait; pointer-events:none; }
input[type=text] { width:100%; height:43px; margin:0 0 9px; border:1px solid #36515a; border-radius:9px; padding:0 12px; color:var(--ink); background:#071820; font-size:11px; }
#path-controls { width:100%; }
.local-launch-instructions { width:100%; display:grid; gap:9px; padding:13px; border:1px solid rgba(81,221,193,.3); border-radius:11px; color:#b9ccd1; background:rgba(5,23,29,.72); font-size:10px; line-height:1.55; }
.local-launch-instructions[hidden],#path-controls[hidden] { display:none; }
.local-launch-instructions strong { color:#8df0d8; font-size:11px; }
.local-launch-instructions code { color:#d9f8f1; }
progress { width:100%; height:6px; margin-top:13px; accent-color:var(--teal); }
.message { min-height:46px; margin:16px 0 40px; padding:14px 17px; border:1px solid #263f48; border-radius:11px; color:#acc0c7; background:rgba(9,27,35,.72); font-size:11px; }
.message.error { color:#ffb5a9; border-color:#6d3d39; }.message.success { color:#9bf1d9; border-color:#376b61; }
.library-section { margin-top:15px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.icon-button { width:40px; height:40px; border:1px solid var(--line); border-radius:10px; color:var(--cyan); background:var(--panel); cursor:pointer; }
.library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.package-card { display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:17px; padding:17px; }
.package-preview { width:72px; height:72px; display:grid; place-items:center; border-radius:13px; overflow:hidden; background:#081a22; }
.package-preview img { width:64px; height:64px; object-fit:contain; }
.package-card h3 { margin:0 0 6px; font-size:17px; }
.package-meta { color:var(--muted); font-size:9px; line-height:1.65; }
.package-actions { display:flex; flex-direction:column; gap:7px; min-width:148px; }
.package-download { white-space:nowrap; }
.surface-tags { display:flex; gap:5px; margin-top:8px; }
.surface-tags span { padding:4px 7px; border-radius:999px; color:#a7dcd6; background:#15343a; font-size:8px; font-weight:800; }
.remote-list { width:100%; display:grid; gap:6px; margin-top:10px; }
.remote-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border-radius:8px; background:#091b23; color:#bed0d5; font-size:9px; }
.remote-item button { min-height:30px; padding:0 9px; }
.empty { grid-column:1/-1; padding:40px; border:1px dashed #35505a; border-radius:15px; color:var(--muted); text-align:center; }
.browser-local-modal { position:fixed; z-index:100; inset:0; background:#06141d; }
.browser-local-modal[hidden] { display:none; }
.browser-local-bar { height:54px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 14px 0 22px; border-bottom:1px solid var(--line); color:#baf4e7; background:#091d26; }
.browser-local-bar strong { font-size:11px; letter-spacing:.15px; }
.browser-local-bar .icon-button { font-size:24px; line-height:1; }
#browser-local-frame { display:block; width:100%; height:calc(100% - 54px); border:0; background:#06141d; }
@media(max-width:900px){.import-grid{grid-template-columns:1fr}.library-grid{grid-template-columns:1fr}.hero>img{display:none}.hero{min-height:260px}.contract{display:none}.package-card{grid-template-columns:72px 1fr}.package-actions{grid-column:1/-1;flex-direction:row}.package-actions .button{flex:1}}