:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#f1fff4;background:#010503;--lime:#8aff3c}*{box-sizing:border-box}body{margin:0;min-height:100dvh}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid #b5ff8a;outline-offset:3px}.shell{max-width:540px;min-height:100dvh;margin:auto;position:relative;overflow:hidden;background:#010503;box-shadow:0 0 70px #123c1c}.wall{position:absolute;inset:0;background:linear-gradient(#0004,#0009),url('assets/bg-phone.webp') center/cover;pointer-events:none;transition:opacity .3s}.shell[data-wall="feed"] .wall{background-image:linear-gradient(#0004,#0009),url('assets/bg-feed.webp')}.shell[data-wall="welcome"] .wall{background-image:linear-gradient(#0004,#0009),url('assets/bg-welcome.webp')}.shell[data-wall="banner"] .wall{background-image:linear-gradient(#0004,#0009),url('assets/bg-banner.webp')}.top{height:43px;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;position:relative;z-index:3;background:linear-gradient(#000b,transparent)}.brand{font-weight:850;letter-spacing:.07em;font-size:13px}.status{font-size:12px;color:#b8f5bd}.smallbtn{border:1px solid #62e85955;background:#06170bc9;border-radius:13px;padding:8px 11px}.content{position:relative;z-index:2;padding:12px 18px 105px;min-height:calc(100dvh - 43px)}.content.homeview{padding-top:12px}.homeview .appgrid{margin-top:8px}.homeview .app img{width:min(100%,82px)}.homeview .app span{font-size:11px}.homeview .appgrid{row-gap:25px}.homeview .homehint{margin-top:26px;text-align:center;font-size:11px;color:#a9cba9a8}.wall{filter:brightness(.88)}h1{font-size:24px;letter-spacing:-.03em;margin:12px 0 4px}p{color:#b2c9b7;line-height:1.5}.sub{font-size:13px;margin:0 0 24px}.appgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px 10px;margin-top:22px}.app{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:0}.app img{width:min(100%,78px);aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 18px #49ff2019}.app span{font-size:11px;font-weight:650;line-height:1.2;text-align:center;text-shadow:0 1px 6px #000;max-width:90px}.dock{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:min(540px,100%);display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:8px 9px calc(7px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#020803f5,#06160be8);border-top:1px solid #4cd93840;backdrop-filter:blur(18px)}.dock button{border:0;background:transparent;display:flex;align-items:center;flex-direction:column;gap:3px;padding:2px 0;color:#b7d2bd;font-size:10px}.dock button.active{color:#a4ff83}.dock img{width:35px;height:35px;object-fit:cover;border-radius:50%}.panel{background:#041009d9;border:1px solid #69f35a36;border-radius:20px;padding:17px;margin:15px 0;backdrop-filter:blur(15px)}.panel h2{font-size:16px;margin:0 0 9px}.action{display:inline-flex;gap:8px;align-items:center;background:#102b16;border:1px solid #74e96e77;padding:10px 14px;border-radius:12px;margin:4px 5px 4px 0}.muted{font-size:13px;color:#b7c9b8}.listrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #ffffff15}.listrow:last-child{border:0}.listrow img{height:46px;width:46px;border-radius:50%}.listrow div{flex:1}.listrow strong{display:block;font-size:14px}.listrow small{color:#a9c4ac}.listrow button{border:1px solid #63d9506b;background:#102617;border-radius:9px;padding:7px 10px;font-size:12px}.chips{display:flex;gap:7px;flex-wrap:wrap}.chip{padding:8px 12px;border-radius:30px;border:1px solid #6be15e66;background:#0b1b10}.chip.on{background:#317e2a}.wallgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.wallpick{border:2px solid transparent;border-radius:12px;overflow:hidden;padding:0;background:#06130a}.wallpick.selected{border-color:#a0ff72}.wallpick img{width:100%;height:116px;object-fit:cover;display:block}.empty{text-align:center;padding:30px 12px}.empty img{width:92px;border-radius:50%}.note{font-size:12px;color:#93b99c}.spacer{height:12px}@media(max-width:365px){.appgrid{gap:16px 7px}.app span{font-size:10px}.content{padding-left:12px;padding-right:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.listrow button{min-width:32px}.listrow button[data-move]{padding:7px 8px}.top .status:last-child{opacity:.75}.shell:has(.homeview) .wall{background-image:linear-gradient(#0007,#0008),url('assets/bg-phone.webp')}.shell[data-wall="feed"]:has(.homeview) .wall{background-image:linear-gradient(#0007,#0008),url('assets/bg-feed.webp')}.shell[data-wall="welcome"]:has(.homeview) .wall{background-image:linear-gradient(#0007,#0008),url('assets/bg-welcome.webp')}.shell[data-wall="banner"]:has(.homeview) .wall{background-image:linear-gradient(#0007,#0008),url('assets/bg-banner.webp')}
/* Living Fren Network — persistent transparent animation behind every screen. */
#fren-network-front{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:1;mix-blend-mode:screen}#fren-network{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:1}
.shell{isolation:isolate}.wall{z-index:0}.top,.content,.dock{isolation:isolate}
.network-controls{display:flex;gap:8px;flex-wrap:wrap}.network-controls button[aria-pressed="true"]{border-color:#a8ff8a;background:#205a2a}
@media(prefers-reduced-motion:reduce){#fren-network,#fren-network-front{opacity:.25}}

/* Stage 4: reusable app-shell refinements */
.app:active{transform:scale(.96)}.app{transition:transform .14s ease}.section-title{font-size:11px;letter-spacing:.13em;color:#9bcba5;text-transform:uppercase;margin:22px 0 8px}.admin-notice{border:1px solid #d4b26c75;background:#251b0bc9;color:#f7dfac;padding:12px;border-radius:12px;font-size:12px;line-height:1.5}.input{width:100%;padding:12px;background:#06140b;border:1px solid #69f35a55;border-radius:10px;color:#f1fff4}.settingsrow{display:flex;justify-content:space-between;align-items:center;gap:12px}.settingsrow .muted{margin:4px 0}.admin-link{display:inline-block;margin-top:10px;color:#adff8b}.shell[data-page="home"] .content{padding-bottom:110px}

/* Stage 5 account forms */
#account-panel label{display:block;margin:12px 0;color:#e7ffe9;font-size:13px}#account-panel input{display:block;margin-top:6px} .account-buttons{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}#account-status{min-height:1.3em} 

/* Phone-style notification bar actions */
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.top-icon{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(8,32,15,.56);color:#c4ffb0;padding:7px;transition:background .18s,transform .18s}.top-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.top-icon:active{transform:scale(.93);background:#1d4a26}.top .status{margin-left:auto;margin-right:9px;white-space:nowrap}.top{gap:6px}.brand{white-space:nowrap}@media(max-width:360px){.top{padding-left:11px;padding-right:11px}.top-actions{gap:2px}.top-icon{width:31px;height:31px}.brand{font-size:11px}}

/* Member profiles and social */
#profile-form label,#post-form label{display:block;margin:12px 0;font-size:13px;color:#d7f4dc}textarea.input{resize:vertical;min-height:90px;font:inherit}.member-card{display:flex;gap:12px;align-items:center;margin:10px 0}.member-card img{width:54px;height:54px;border-radius:50%;object-fit:cover;background:#0b2511}.member-card strong,.member-card small{display:block}.member-card small{font-size:12px;color:#a3c6a6}.profile-banner{height:120px;border-radius:14px;background:linear-gradient(130deg,#061d0d,#2c6c35,#071c0c);background-position:center;background-size:cover}.post{overflow-wrap:anywhere}.post-author{display:flex;align-items:center;justify-content:space-between;gap:10px}.post-author small{color:#9bb6a0;font-size:10px}.post-body{white-space:normal;color:#e6f8e9}.post-media{width:100%;max-height:460px;object-fit:contain;border-radius:12px}.share-option{display:flex!important;gap:10px;align-items:center}.share-option input{accent-color:#8aff3c}

/* Fren messaging */
.conversation,.activity-item{display:block;width:100%;text-align:left;padding:13px;margin:6px 0;border:1px solid rgba(111,240,125,.2);border-radius:12px;background:rgba(5,25,10,.6);color:#e6ffe6;cursor:pointer}.conversation small,.activity-item small{display:block;color:#9bbba2;font-size:12px;margin-top:4px}.conversation[hidden]{display:none}.chat-thread{min-height:170px;max-height:50vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px 0}.chat-bubble{align-self:flex-start;max-width:82%;background:#193a23;border-radius:14px;padding:10px 13px;overflow-wrap:anywhere}.chat-bubble.mine{align-self:flex-end;background:#315f31}#chat-form{display:flex;gap:8px}#chat-form .input{flex:1;min-width:0}