.portal-body { --matrix:#5cff8a; --matrix-dim:#238f48; min-height: 100vh; background: #030806; color:#d7ffe3; font-family:var(--font-geist-mono); }
.portal-body::before { content:""; position:fixed; inset:0; z-index:50; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0,rgba(0,0,0,.13) 1px,transparent 1px,transparent 4px); mix-blend-mode:multiply; }
.portal-body::after { content:"SG-NET // ENTERING SECURE NODE"; position:fixed; inset:0; z-index:45; display:grid; place-items:center; color:var(--matrix); background:repeating-radial-gradient(ellipse at center,#020503 0 3%,#07170d 3.4% 5%,#010302 5.4% 8%); font:700 clamp(10px,1.2vw,14px)/1 var(--font-geist-mono); letter-spacing:.28em; text-shadow:0 0 14px var(--matrix); pointer-events:none; animation:tunnelEntry 1.35s cubic-bezier(.7,0,.2,1) forwards; }
.matrix-rain { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; opacity:.11; color:var(--matrix); font:10px/1.8 var(--font-geist-mono); writing-mode:vertical-rl; display:flex; justify-content:space-around; letter-spacing:.28em; }
.matrix-rain span { animation:matrixFall 18s linear infinite; text-shadow:0 0 8px var(--matrix); }
.matrix-rain span:nth-child(2){animation-duration:24s;animation-delay:-8s}.matrix-rain span:nth-child(3){animation-duration:15s;animation-delay:-12s}.matrix-rain span:nth-child(4){animation-duration:21s;animation-delay:-4s}
.portal-header { height:82px; padding:0 clamp(22px,5vw,76px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(92,255,138,.22); background:rgba(3,8,6,.93); box-shadow:0 0 35px rgba(35,143,72,.1); position:relative; z-index:4; }
.portal-body .brand-name b { color:var(--matrix); text-shadow:0 0 10px rgba(92,255,138,.45); }
.portal-security { justify-self:center; color:#70a980; font:700 10px/1 var(--font-geist-mono); letter-spacing:.12em; text-transform:uppercase; }
.portal-security i, .portal-status strong i { display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--matrix); box-shadow:0 0 12px var(--matrix); }
.portal-signout { justify-self: end; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.portal-signout span { margin-left:9px; color:var(--matrix); }
.portal-main { min-height:calc(100vh - 160px); position:relative; z-index:1; animation:roomArrival 1.1s .5s both; }
.portal-hero { min-height:570px; padding:120px clamp(22px,7vw,110px) 86px; display:grid; grid-template-columns:1fr 340px; gap:80px; align-items:end; position:relative; overflow:hidden; border-bottom:1px solid rgba(92,255,138,.18); background:radial-gradient(circle at 77% 42%,rgba(35,143,72,.17),transparent 26%),linear-gradient(125deg,rgba(2,7,5,.96),rgba(5,17,10,.94)); }
.portal-hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(92,255,138,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(92,255,138,.055) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to right,transparent,black 35%,black); }
.portal-hero::after { content:"SG_01"; position:absolute; right:-2vw; top:1vw; color:rgba(92,255,138,.035); font-size:24vw; font-weight:900; letter-spacing:-.12em; pointer-events:none; }
.portal-hero > div,.portal-status { position: relative; z-index: 1; }
.portal-body .eyebrow { color:#70a980; }.portal-body .eyebrow>span{background:var(--matrix);box-shadow:0 0 12px var(--matrix)}
.portal-hero h1 { font-family:var(--font-geist-sans); font-size:clamp(56px,7vw,104px); text-shadow:0 0 38px rgba(92,255,138,.08); }
.portal-hero h1 em { color:var(--matrix); font-family:var(--font-geist-mono); font-weight:400; text-shadow:0 0 18px rgba(92,255,138,.34); }
.portal-hero > div > p:last-child { max-width:690px; color:#79a486; font-size:15px; line-height:1.75; }
.portal-status { border:1px solid rgba(92,255,138,.35); padding:28px; background:rgba(2,12,7,.8); box-shadow:inset 0 0 28px rgba(35,143,72,.07),0 0 30px rgba(35,143,72,.08); backdrop-filter:blur(16px); }
.portal-status::before{content:"SECURE TERMINAL";position:absolute;top:-9px;left:18px;padding:3px 8px;background:#030806;color:var(--matrix);font-size:8px;letter-spacing:.16em}
.portal-status > span,.resource-type,.portal-notice span { display:block; color:#467757; font:700 9px/1 var(--font-geist-mono); letter-spacing:.14em; text-transform:uppercase; }
.portal-status strong { display:block; margin:22px 0 14px; color:var(--matrix); font-size:20px; letter-spacing:.08em; }
.portal-status p { margin:0; color:#678872; font-size:11px; line-height:1.6; }
.terminal-line { margin-top:22px; padding-top:18px; border-top:1px dashed rgba(92,255,138,.2); color:#54b873; font-size:10px; line-height:1.8; }
.terminal-line span{animation:blink 1s steps(1) infinite;color:var(--matrix)}
.portal-tools { padding:105px clamp(22px,7vw,110px) 120px; background:rgba(4,11,7,.96); color:#d7ffe3; border-bottom:1px solid rgba(92,255,138,.15); }
.portal-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 54px; }
.portal-section-heading h2 { font-family:var(--font-geist-sans); font-size:clamp(48px,5.5vw,82px); }.portal-section-heading h2 em{color:var(--matrix);font-family:var(--font-geist-mono);text-shadow:0 0 14px rgba(92,255,138,.25)}
.portal-section-heading > p { max-width:430px; margin:0; color:#5f8069; line-height:1.65; }
.resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgba(92,255,138,.2); border-left:1px solid rgba(92,255,138,.2); }
.resource-card { min-height:315px; padding:34px; border-right:1px solid rgba(92,255,138,.2); border-bottom:1px solid rgba(92,255,138,.2); position:relative; display:flex; flex-direction:column; align-items:flex-start; background:rgba(4,15,9,.55); transition:background .2s,box-shadow .2s; }
.resource-card:hover { background:rgba(10,31,17,.78); box-shadow:inset 0 0 34px rgba(35,143,72,.08); }.resource-card.featured{background:rgba(8,28,15,.85)}
.resource-icon { width:54px; height:42px; display:grid; place-items:center; border:1px solid rgba(92,255,138,.4); background:#020704; color:var(--matrix); text-shadow:0 0 8px var(--matrix); font:800 11px/1 var(--font-geist-mono); margin-bottom:28px; }
.resource-card h3 { margin:12px 0 10px; font-family:var(--font-geist-sans); font-size:28px; letter-spacing:-.035em; }
.resource-card p { max-width:500px; margin:0 0 30px; color:#668471; line-height:1.55; font-size:12px; }
.resource-card button { margin-top:auto; min-height:42px; padding:0 16px; border:1px solid rgba(92,255,138,.25); background:rgba(92,255,138,.03); color:#477454; font:750 9px/1 var(--font-geist-mono); letter-spacing:.09em; text-transform:uppercase; cursor:not-allowed; }
.vault-manager{margin-top:70px;border:1px solid rgba(92,255,138,.24);background:rgba(2,10,6,.78);box-shadow:inset 0 0 50px rgba(35,143,72,.035)}
.vault-heading{min-height:92px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(92,255,138,.18)}
.vault-heading span,.vault-list-heading span{color:#477454;font:700 8px/1 var(--font-geist-mono);letter-spacing:.15em}.vault-heading h3{margin:8px 0 0;color:#d7ffe3;font:600 27px/1 var(--font-geist-sans)}
.vault-state{color:var(--matrix);font-size:9px;letter-spacing:.12em}.vault-state i{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--matrix);box-shadow:0 0 10px var(--matrix)}
.upload-form{padding:26px;border-bottom:1px solid rgba(92,255,138,.18)}
.file-drop{min-height:120px;display:grid;place-items:center;align-content:center;gap:8px;border:1px dashed rgba(92,255,138,.38);background:rgba(92,255,138,.025);cursor:pointer;text-align:center}.file-drop:hover{background:rgba(92,255,138,.05)}.file-drop input{position:absolute;opacity:0;pointer-events:none}.file-drop strong{color:var(--matrix);font-size:12px}.file-drop span{color:#477454;font-size:9px}
.upload-fields{display:grid;grid-template-columns:1.3fr 1fr .65fr auto;gap:12px;margin-top:16px}.upload-fields label{display:grid;gap:7px;color:#477454;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.upload-fields input,.upload-fields select{height:42px;padding:0 12px;border:1px solid rgba(92,255,138,.24);background:#030906;color:#a9d8b7;font:11px var(--font-geist-mono);outline:none}.upload-fields input:focus,.upload-fields select:focus{border-color:var(--matrix);box-shadow:0 0 12px rgba(92,255,138,.1)}.upload-fields button{align-self:end;height:42px;padding:0 16px;border:1px solid var(--matrix);background:var(--matrix);color:#031006;font:800 9px var(--font-geist-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.upload-fields button:disabled{opacity:.45;cursor:wait}
.upload-status{min-height:16px;margin:12px 0 0;color:#70a980;font-size:10px}.upload-status.error{color:#ff6b6b}
.vault-list-heading{height:56px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(92,255,138,.15)}.vault-list-heading button{border:0;background:transparent;color:#5aa36f;font:9px var(--font-geist-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.vault-files{min-height:110px}.vault-empty{padding:30px 26px;margin:0;color:#477454;font-size:10px}.vault-row{display:grid;grid-template-columns:1fr auto auto;gap:22px;align-items:center;padding:18px 26px;border-bottom:1px solid rgba(92,255,138,.11)}.vault-row:last-child{border-bottom:0}.vault-file-name{color:#c8f8d5;font:600 14px var(--font-geist-sans)}.vault-file-meta{margin-top:6px;color:#477454;font-size:8px;letter-spacing:.08em;text-transform:uppercase}.vault-size{color:#668471;font-size:9px}.vault-actions{display:flex;gap:8px}.vault-actions a,.vault-actions button{min-height:34px;padding:0 12px;display:inline-flex;align-items:center;border:1px solid rgba(92,255,138,.24);background:transparent;color:#70a980;font:8px var(--font-geist-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.vault-actions .delete-file{border-color:rgba(255,80,80,.25);color:#a75e5e}
.portal-notice { min-height:130px; padding:30px clamp(22px,7vw,110px); display:flex; align-items:center; justify-content:space-between; gap:40px; background:#07150c; border-top:1px solid rgba(92,255,138,.24); border-bottom:1px solid rgba(92,255,138,.24); }
.vault-actions .share-file{border-color:var(--matrix);color:var(--matrix);box-shadow:0 0 12px rgba(92,255,138,.08)}
.share-manager{margin-top:24px;border:1px solid rgba(92,255,138,.24);background:rgba(2,10,6,.78)}.terminal-button,.revoke-share{min-height:34px;padding:0 12px;border:1px solid rgba(92,255,138,.24);background:transparent;color:#70a980;font:8px var(--font-geist-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.share-row{grid-template-columns:1fr auto}.revoke-share{border-color:rgba(255,80,80,.3);color:#b76b6b}
.share-dialog{width:min(560px,calc(100vw - 32px));padding:0;border:1px solid rgba(92,255,138,.5);background:#030906;color:#d7ffe3;box-shadow:0 0 80px rgba(35,143,72,.22)}.share-dialog::backdrop{background:rgba(0,3,1,.84);backdrop-filter:blur(8px)}.share-dialog form{padding:34px;position:relative}.share-dialog form>span{color:#477454;font:700 8px var(--font-geist-mono);letter-spacing:.15em}.share-dialog h2{margin:10px 0 12px;font:650 42px var(--font-geist-sans)}.share-dialog form>p{color:#70a980;font-size:11px}.dialog-close{position:absolute;right:18px;top:15px;border:0;background:transparent;color:#70a980;font-size:28px;cursor:pointer}.share-dialog label{display:grid;gap:8px;margin:25px 0 14px;color:#477454;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.share-dialog select,.share-result input{height:44px;padding:0 12px;border:1px solid rgba(92,255,138,.3);background:#020503;color:#a9d8b7;font:11px var(--font-geist-mono)}.create-share,.share-result button{width:100%;height:46px;border:1px solid var(--matrix);background:var(--matrix);color:#031006;font:800 9px var(--font-geist-mono);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}.create-share b{float:right}.share-result{margin-top:24px;padding:20px;border:1px solid rgba(92,255,138,.3);background:rgba(92,255,138,.035)}.share-result small{display:block;color:#477454;font-size:8px;letter-spacing:.14em}.share-result strong{display:block;margin:10px 0 14px;color:var(--matrix);font-size:28px;letter-spacing:.16em}.share-result input{width:100%;margin-bottom:10px}.share-result button{background:transparent;color:var(--matrix)}
.portal-notice strong { display: block; margin-top: 10px; font-size: 18px; }
.portal-notice strong{color:var(--matrix);text-shadow:0 0 12px rgba(92,255,138,.2)}.portal-notice span{color:#477454}.portal-notice p{max-width:390px;color:#668471;font-size:11px;line-height:1.55}
.portal-footer { min-height: 78px; padding: 0 clamp(22px,5vw,76px); display: flex; justify-content: space-between; align-items: center; color: #696661; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.portal-footer { position:relative;z-index:2;border-top:1px solid rgba(92,255,138,.14) }.portal-footer a{color:#70a980}
@keyframes matrixFall{from{transform:translateY(-25%)}to{transform:translateY(25%)}}@keyframes blink{50%{opacity:0}}
@keyframes tunnelEntry{0%{opacity:1;transform:scale(1)}62%{opacity:1;transform:scale(2.8)}100%{opacity:0;transform:scale(7);visibility:hidden}}@keyframes roomArrival{from{opacity:0;filter:blur(9px);transform:scale(.97)}to{opacity:1;filter:blur(0);transform:scale(1)}}
@media(max-width:800px){.portal-header{grid-template-columns:1fr auto}.portal-security{display:none}.portal-hero{grid-template-columns:1fr;padding-top:90px}.portal-status{max-width:420px}.portal-section-heading{align-items:flex-start;flex-direction:column}.resource-grid{grid-template-columns:1fr}}
@media(max-width:900px){.upload-fields{grid-template-columns:1fr 1fr}.vault-row{grid-template-columns:1fr auto}.vault-actions{grid-column:1/-1}}
@media(max-width:520px){.portal-header{height:70px}.portal-signout{font-size:0}.portal-signout span{font-size:20px}.portal-hero{padding-top:75px;gap:40px}.portal-hero h1{font-size:50px}.resource-card{padding:26px}.portal-notice{align-items:flex-start;flex-direction:column}.portal-footer{gap:20px}.upload-fields{grid-template-columns:1fr}.vault-heading{align-items:flex-start;flex-direction:column;gap:14px}.vault-row{grid-template-columns:1fr}.vault-size{justify-self:start}}
@media(prefers-reduced-motion:reduce){.portal-body::after{display:none}.portal-main{animation:none}}