:root{font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Arial,sans-serif;color:#e9edf7;background:#080c15}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}.shell{min-height:100vh;display:flex}.sidebar{width:258px;flex-shrink:0;background:#0d121e;border-right:1px solid #202838;padding:30px 17px;display:flex;flex-direction:column;min-height:100vh}.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;letter-spacing:-.7px;padding:0 9px 44px}.brand small{display:block;font-size:9px;color:#68768e;letter-spacing:2.1px;margin-top:3px}.mark{display:grid;place-items:center;width:41px;height:41px;background:linear-gradient(135deg,#ffae57,#e97923);color:#10131c;border-radius:12px;font-size:24px}.accent{color:#ffa64c}.section-label{font-size:10px;color:#68758b;letter-spacing:1.8px;font-weight:800;padding:0 14px 15px}nav{display:grid;gap:5px}nav a{display:flex;align-items:center;gap:13px;color:#9daac1;font-size:14px;font-weight:600;padding:14px 15px;border-radius:10px}nav a:hover,nav a.active{background:#222838;color:#fff}nav a.active{box-shadow:inset 3px 0 #f39b43}.side-bottom{margin-top:auto;padding:18px 14px;border:1px solid #293142;background:#151b28;border-radius:12px;font-size:12px;color:#d5ddeb}.side-bottom p{margin:8px 0 0;color:#7f8ba2}.online-dot{display:inline-block;background:#39cf91;width:8px;height:8px;border-radius:50%;margin-right:7px}.workspace{flex:1;min-width:0}.topbar{height:82px;border-bottom:1px solid #202838;display:flex;align-items:center;justify-content:space-between;padding:0 45px;background:#0c111b}.crumb{color:#738099;font-size:12px;font-weight:750;letter-spacing:1.3px}.crumb #pageName{color:#e4eaf4}.chev{padding:0 13px;color:#475166}.top-create,.primary{background:#f59c43!important;color:#19140f!important;border-color:#f59c43!important;font-weight:800!important}.top-create{padding:11px 17px;border-radius:9px;font-size:13px}main{max-width:1160px;padding:47px 45px 70px;margin:auto;min-height:calc(100vh - 148px)}h1{font-size:clamp(30px,4vw,45px);letter-spacing:-1.5px;margin:0 0 12px}h2{font-size:20px;letter-spacing:-.4px;margin:0 0 12px}p{line-height:1.6}.muted{color:#8e9bb1}.eyebrow{color:#f7a253;letter-spacing:2px;font-size:11px;font-weight:800;margin-bottom:14px}.hero{padding:26px 0 27px}.hero p{max-width:600px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:17px;margin-top:25px}.panel,.paste-card,.feature{background:#121a28;border:1px solid #263145;border-radius:14px;padding:25px}.feature .symbol{display:grid;place-items:center;width:41px;height:41px;background:#302719;color:#f5a14b;border-radius:11px;font-size:21px;margin-bottom:22px}.feature h3{margin:0}.feature p{font-size:13px;color:#92a0b6}.paste-card h3{margin:0 0 12px;overflow-wrap:anywhere}.paste-card h3 a:hover{color:#f8a75b}.paste-card small{color:#8391a7}.actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:23px}button,.btn{font:inherit;cursor:pointer;border:1px solid #39475e;background:#202a3a;color:#ecf0f8;border-radius:9px;padding:11px 17px;font-size:13px;font-weight:650}button:hover,.btn:hover{filter:brightness(1.15)}button.danger{color:#ff9c9c}label{display:block;font-size:13px;color:#c4cde0;font-weight:650;margin:19px 0 8px}input,textarea,select{width:100%;border:1px solid #354157;background:#0b121e;color:#f4f7fc;padding:13px 14px;border-radius:9px;font:inherit;outline:none}input:focus,textarea:focus,select:focus{border-color:#f59c43}textarea{min-height:300px;resize:vertical;font-family:Consolas,ui-monospace,monospace;font-size:13px;line-height:1.6}.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#090f19;border:1px solid #273347;border-radius:12px;padding:24px;max-height:65vh;overflow:auto;line-height:1.55}#flash:not(:empty){padding:15px 19px;background:#332516;border:1px solid #8d602f;border-radius:10px;margin-bottom:24px;color:#ffca91}footer{text-align:center;color:#66748a;padding:22px;font-size:12px}.hint{font-size:12px;color:#8b9ab1}.pill{display:inline-block;font-size:11px;border-radius:20px;background:#2a3445;padding:5px 9px;color:#cbd6e9}.empty{padding:34px;text-align:center;color:#8d9bb1;border:1px dashed #344057;border-radius:13px}.copyline{display:flex;gap:10px;align-items:center}.copyline input{flex:1}.lock{color:#ffbd77}@media(max-width:800px){.sidebar{width:75px;padding:25px 8px}.brand{padding:0 5px 35px}.brand>span:last-child,.section-label,nav a span,.side-bottom{display:none}.brand .mark{flex-shrink:0}nav a{justify-content:center;font-size:20px}.topbar{padding:0 20px}main{padding:35px 20px}}@media(max-width:480px){.sidebar{width:57px}.top-create{font-size:11px;padding:10px}.crumb{font-size:10px}main{padding:25px 14px}}

/* Saade Bin — donkerrood & donkergroen */
:root{color:#f2eae8;background:#0c1110;color-scheme:dark}
.sidebar{background:#101715;border-right-color:#2b3c33}
.topbar{background:#111916;border-bottom-color:#2b3c33}
.brand small,.section-label,.crumb,.muted,.hint,footer{color:#a3b1a6}
.mark{background:linear-gradient(135deg,#8e202b,#4e101b);color:#fff}
.accent,.eyebrow{color:#dc7378}
nav a{color:#a6b9ad}
nav a:hover,nav a.active{background:#20392c;color:#f5fff6}
nav a.active{box-shadow:inset 3px 0 #a5323e}
.side-bottom{background:#15241b;border-color:#355240;color:#d9e9dc}
.side-bottom p{color:#a1b9a8}
.online-dot{background:#4da66e}
.crumb #pageName{color:#f2ece8}.chev{color:#698b72}
.top-create,.primary{background:#7c1e2a!important;border-color:#a23b47!important;color:#fff5f4!important}
.top-create:hover,.primary:hover{background:#a12d3b!important}
.panel,.paste-card,.feature{background:#151f1a;border-color:#2f4638}
.feature .symbol{background:#2d1b20;color:#e67d85}
.feature p,.paste-card small{color:#a9b9ac}
.paste-card h3 a:hover{color:#e5848b}
button,.btn{background:#203428;border-color:#3d5945;color:#eef8ee}
button.danger{color:#ef9ca2}
label{color:#d6e5d7}
input,textarea,select{background:#0e1813;border-color:#3b5543;color:#f5f6ef}
input:focus,textarea:focus,select:focus{border-color:#ae3b47;box-shadow:0 0 0 2px #81222d44}
pre{background:#0d1711;border-color:#304b37}
#flash:not(:empty){background:#341d22;border-color:#8c3740;color:#ffd5d5}
.pill{background:#24402e;color:#e0f0e2}
.empty{color:#a7b8aa;border-color:#3d5945}
.lock{color:#e47c84}


/* Saade Bin — cinematic motion update. Visual-only: no API or data changes. */
:root{scroll-behavior:smooth}
body{overflow-x:hidden;isolation:isolate}
body::before{content:"";position:fixed;z-index:-1;pointer-events:none;inset:-28%;background:radial-gradient(ellipse at 20% 30%,rgba(116,25,39,.18),transparent 42%),radial-gradient(ellipse at 78% 75%,rgba(26,96,58,.20),transparent 46%);animation:saadeAmbient 22s ease-in-out infinite alternate;transform-origin:center}
@keyframes saadeAmbient{0%{transform:translate3d(-3%,2%,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.1)}100%{transform:translate3d(-1%,4%,0) scale(1.04)}}
@keyframes saadeEnter{from{opacity:0;transform:translate3d(0,30px,0) scale(.975);filter:blur(5px)}to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes saadeSlide{from{opacity:0;transform:translate3d(-24px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes saadeGlow{0%,100%{box-shadow:0 0 0 rgba(126,37,48,0)}50%{box-shadow:0 0 24px rgba(126,37,48,.32)}}
@keyframes saadePulse{0%,100%{box-shadow:0 0 0 0 rgba(77,166,110,.22)}50%{box-shadow:0 0 0 8px rgba(77,166,110,0)}}
@keyframes saadeFlash{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.sidebar{animation:saadeSlide .85s cubic-bezier(.2,.8,.2,1) both}
.topbar{animation:saadeEnter .75s .1s both}
.brand .mark{animation:saadeGlow 4s ease-in-out infinite;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s}
.brand:hover .mark{transform:rotate(-12deg) scale(1.12);filter:brightness(1.2)}
nav a{transition:transform .32s cubic-bezier(.2,.8,.2,1),background-color .3s,color .3s,box-shadow .3s}
nav a:hover{transform:translateX(6px)}
nav a.active{transition:background-color .3s,box-shadow .3s}
.online-dot{animation:saadePulse 2.5s infinite}
#app > *{animation:saadeEnter .8s cubic-bezier(.2,.8,.2,1) both}
#app > :nth-child(2){animation-delay:.1s}
#app > :nth-child(3){animation-delay:.17s}
#app .grid > *{animation:saadeEnter .75s cubic-bezier(.2,.8,.2,1) both}
#app .grid > :nth-child(2){animation-delay:.12s}
#app .grid > :nth-child(3){animation-delay:.24s}
#app .grid > :nth-child(4){animation-delay:.36s}
#app .grid > :nth-child(n+5){animation-delay:.44s}
.panel,.paste-card,.feature{transition:transform .42s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .42s,background-color .35s}
.paste-card:hover,.feature:hover{transform:translateY(-9px) scale(1.018);border-color:#5e755e;box-shadow:0 20px 45px rgba(0,0,0,.28),0 0 28px rgba(94,35,43,.12)}
.panel:focus-within{border-color:#6b6956;box-shadow:0 14px 45px rgba(0,0,0,.2)}
button,.btn,.top-create{transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s,box-shadow .28s,background-color .28s}
button:hover,.btn:hover,.top-create:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(0,0,0,.24)}
button:active,.btn:active,.top-create:active{transform:scale(.96)}
input,textarea,select{transition:border-color .3s,box-shadow .3s,background-color .3s,transform .3s}
input:focus,textarea:focus,select:focus{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(136,43,56,.25),0 12px 26px rgba(0,0,0,.16)}
.feature .symbol{transition:transform .5s cubic-bezier(.2,.8,.2,1),background-color .3s}
.feature:hover .symbol{transform:rotate(-9deg) scale(1.16)}
#flash:not(:empty){animation:saadeFlash .5s cubic-bezier(.2,.8,.2,1) both}
pre{transition:border-color .3s,box-shadow .3s}
pre:hover{border-color:#47634d;box-shadow:0 16px 35px rgba(0,0,0,.2)}
a:focus-visible,button:focus-visible{outline:2px solid #e88e92;outline-offset:3px}
@media(max-width:800px){nav a:hover{transform:none}.paste-card:hover,.feature:hover{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}body::before{animation:none}}