@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--bg:#08090b;--panel:#101216;--panel2:#15181e;--line:#252a32;--muted:#8b919d;--white:#f4f4f1;--silver:#c6c9ce;--accent:#d7d8dc;--gold:#bca77d}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font-family:'DM Sans',sans-serif}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:248px 1fr}.sidebar{border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh;background:#0b0c0f}.brand{display:flex;align-items:center;gap:12px;color:var(--white);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:2px;margin:0 8px 52px}.brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:3px;margin-top:4px}.brand-mark{width:36px;height:36px;border:1px solid #777b84;border-radius:50%;display:grid;place-items:center;font-family:Georgia;font-size:17px;letter-spacing:-3px}.brand-mark span{color:#aeb2ba}.nav{width:100%;border:0;background:none;text-align:left;padding:14px 13px;color:#9da2ac;border-radius:9px;margin:3px 0;font-size:13px}.nav span{display:inline-block;width:27px;font-size:17px}.nav:hover,.nav.active{background:#1a1d23;color:white}.nav b{float:right;font-size:10px;background:#292e37;padding:3px 7px;border-radius:20px}.sidebar-bottom{margin-top:auto}.tiny{font-size:9px;letter-spacing:2px;color:#555b65;margin:25px 12px 0}.main{min-width:0}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.top-actions{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px}.status-dot{width:7px;height:7px;border-radius:50%;background:#a68e61}.avatar{width:34px;height:34px;border:1px solid #6e7279;border-radius:50%;background:#1c2026;margin-left:14px}.mobile-brand,.mobile-menu{display:none}.view{display:none;max-width:1280px;margin:auto;padding:44px 5vw 70px}.view.active{display:block}.hero{position:relative;overflow:hidden;min-height:310px;border:1px solid #282d34;background:linear-gradient(110deg,#171a20,#0d0f13 62%,#17191e);border-radius:15px;padding:48px 5%;margin-bottom:55px}.eyebrow{font-size:9px;letter-spacing:3px;color:#aaaeb6;font-weight:700}.hero h1,.page-heading h1{font-size:clamp(37px,5vw,62px);line-height:1.05;letter-spacing:-2px;margin:18px 0 12px}.hero h1 em{font-family:'Playfair Display',serif;font-weight:500;color:#b9bbc1}.hero p,.page-heading p{color:#9da2ac;max-width:480px;font-size:13px;line-height:1.8}.hero-actions{display:flex;gap:10px;margin-top:26px}.primary,.secondary{border:1px solid #e0e1e4;border-radius:6px;padding:12px 17px;font-size:11px;font-weight:700}.primary{background:#e5e5e2;color:#111318}.secondary{background:transparent;color:#e2e3e5;border-color:#454a54}.primary:hover{background:white}.hero-orbit{position:absolute;border:1px solid #454a53;border-radius:50%;opacity:.4;pointer-events:none}.orbit-one{width:300px;height:300px;right:7%;top:10px}.orbit-two{width:190px;height:190px;right:12%;top:65px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.section-head h2{font-size:25px;margin:9px 0 0;letter-spacing:-.7px}.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#111419;padding:0 14px;border-radius:6px;width:min(330px,48%);color:#8e949e}.search input{width:100%;background:none;border:0;outline:0;color:white;padding:12px 0;font-size:11px}.filters{display:flex;gap:7px;margin:24px 0}.chip{background:transparent;border:1px solid #343943;border-radius:30px;padding:8px 14px;font-size:10px;color:#aeb3bc}.chip.selected{background:#e1e2e3;color:#111;border-color:#e1e2e3}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.character-card{min-width:0;cursor:pointer}.portrait{aspect-ratio:3/4;background:#171a20;border:1px solid #292e36;border-radius:8px;overflow:hidden;position:relative}.portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.78);transition:transform .5s}.character-card:hover .portrait img{transform:scale(1.045)}.portrait-placeholder{height:100%;display:grid;place-items:center;color:#777e89;font-family:'Playfair Display',serif;font-size:50px;background:radial-gradient(circle at 50% 30%,#30343b,#111318 70%)}.card-fav{position:absolute;right:9px;top:9px;border:1px solid #ffffff55;background:#08090b99;border-radius:50%;width:31px;height:31px}.card-info{padding:11px 2px}.card-info strong{display:block;font-size:13px}.card-info small{display:block;color:#8e949e;font-size:10px;margin-top:5px}.footnote{font-size:10px;color:#656b75;line-height:1.7;margin-top:28px}.page-heading{margin:15px 0 32px}.page-heading h1{font-size:44px}.conversation-list{display:grid;gap:10px;max-width:750px}.conversation-row{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);padding:12px;border-radius:8px;cursor:pointer}.conversation-row img,.mini-avatar{width:48px;height:58px;object-fit:cover;border-radius:4px;background:#292d34}.conversation-row strong{font-size:12px}.conversation-row p{color:#8d939e;font-size:10px;margin:5px 0 0}.form-card,.settings-card{max-width:680px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px;display:grid;gap:17px}.form-card label{font-size:11px;color:#b9bdc5;display:grid;gap:8px}.form-card input,.form-card textarea{width:100%;background:#090b0e;border:1px solid #303640;border-radius:5px;color:white;padding:12px;outline:none}.form-card textarea{resize:vertical}.settings-card{display:block;margin:0 0 14px}.settings-card h3{font-size:14px;margin:0 0 8px}.settings-card p{font-size:11px;color:#989ea8;line-height:1.8}.setting-title{display:flex;justify-content:space-between;align-items:center}.pill{font-size:9px;letter-spacing:1px;border:1px solid #5d5140;color:#c8b18a;padding:6px 9px;border-radius:30px}.setting-note{background:#191c22;padding:12px;border-radius:5px}.env-list{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.env-list code{font-size:10px;padding:7px 9px;background:#090b0e;border:1px solid #303640;border-radius:4px;color:#d4d5d7}.text-link{font-size:11px;color:#d8d9dc}.danger{margin-top:8px}.chat-overlay,.profile-overlay{display:none;position:fixed;inset:0;background:#000b;z-index:20;justify-content:flex-end}.chat-overlay.open,.profile-overlay.open{display:flex}.chat-panel{width:min(570px,100%);height:100%;background:#0c0e12;border-left:1px solid #333943;display:flex;flex-direction:column}.chat-header{height:75px;display:flex;align-items:center;gap:12px;padding:0 17px;border-bottom:1px solid var(--line)}.chat-header img{width:39px;height:48px;object-fit:cover;border-radius:4px;background:#252a32}.chat-title{flex:1}.chat-title strong{display:block;font-size:12px}.chat-title small{display:block;color:#858c97;font-size:9px;margin-top:5px}.icon-btn{background:none;border:0;color:#d7d9dd;font-size:22px;padding:7px}.relationship{display:flex;align-items:center;gap:10px;padding:12px 18px;font-size:9px;color:#aaaeb7}.relationship-track{height:3px;background:#2b3039;flex:1;border-radius:4px;overflow:hidden}.relationship-track i{display:block;height:100%;width:0;background:#c3b18e}.chat-disclaimer{text-align:center;color:#646b76;font-size:9px;padding:8px}.messages{padding:20px 17px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:13px}.bubble{max-width:84%;padding:12px 14px;border-radius:10px;font-size:12px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.bubble.user{align-self:flex-end;background:#e2e3e4;color:#111318;border-bottom-right-radius:2px}.bubble.character{align-self:flex-start;background:#1b1f26;color:#eceef1;border:1px solid #2c323c;border-bottom-left-radius:2px}.bubble .time{display:block;font-size:8px;opacity:.55;margin-top:6px}.typing{display:none;padding:0 20px 10px;color:#8c929c;font-size:10px}.typing.show{display:block}.typing span{letter-spacing:3px;margin-left:7px}.composer{display:flex;align-items:end;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}.composer textarea{flex:1;max-height:110px;resize:none;background:#171a20;border:1px solid #303640;border-radius:8px;color:white;padding:12px;outline:0;font-size:12px}.send-btn{width:40px;height:40px;border:0;border-radius:8px;background:#e5e5e2;color:#111;font-size:22px}.chat-foot{text-align:center;padding:0 10px 12px;color:#5e6570;font-size:9px}.profile-overlay{justify-content:center;align-items:center}.profile-card{position:relative;background:#15181e;border:1px solid #383e48;border-radius:12px;padding:35px;max-width:360px;width:calc(100% - 36px)}.profile-card h2{font-family:'Playfair Display',serif;font-size:32px}.profile-card p{color:#9da2ac;font-size:12px;line-height:1.7}.close-profile{position:absolute;right:12px;top:8px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#e5e5e2;color:#111;padding:11px 17px;border-radius:6px;font-size:11px;opacity:0;pointer-events:none;transition:.25s;z-index:40}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.app-shell{grid-template-columns:205px 1fr}.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.view{padding-left:4vw;padding-right:4vw}}
@media(max-width:650px){.app-shell{display:block}.sidebar{position:fixed;z-index:30;left:-260px;top:0;width:245px;transition:left .25s;box-shadow:15px 0 45px #0008}.sidebar.open{left:0}.topbar{height:62px;padding:0 16px}.mobile-menu,.mobile-brand{display:flex}.mobile-brand{margin:0;font-size:11px}.mobile-brand .brand-mark{width:29px;height:29px}.top-actions{font-size:9px}.avatar{margin-left:4px}.view{padding:25px 17px 55px}.hero{min-height:300px;padding:34px 24px;margin-bottom:38px}.hero-orbit{right:-120px}.hero h1{font-size:43px}.hero p{max-width:280px}.hero-actions{flex-wrap:wrap}.section-head{align-items:flex-start;flex-direction:column}.search{width:100%}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.filters{overflow:auto}.page-heading h1{font-size:38px}.chat-panel{width:100%;border:0}.form-card,.settings-card{padding:18px}}
