:root{color:#1b1a19;background:#eef3f8;font-family:Segoe UI Variable,Segoe UI,system-ui,-apple-system,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,textarea{font:inherit}button,input,textarea{border-radius:6px}#app{min-height:100vh;padding:48px 24px 80px;background:radial-gradient(circle at 12% 5%,rgba(76,194,255,.18),transparent 28rem),radial-gradient(circle at 88% 12%,rgba(124,92,255,.13),transparent 24rem),#eef3f8}.shell{width:min(960px,100%);margin:0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.75);border-radius:20px;background:#ffffffeb;box-shadow:0 16px 44px #1e40621f,0 2px 8px #1e406214}header{position:relative;min-height:104px;padding:24px 32px;overflow:hidden;color:#fff;background:linear-gradient(115deg,#111827,#142f4c 55%,#183f68)}header:after{position:absolute;top:-90px;right:-40px;width:260px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(74,184,255,.42),transparent 68%);content:"";pointer-events:none}header,.section-title,.snippet-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}h1{margin:5px 0 0;font-size:clamp(30px,5vw,42px);font-weight:300;letter-spacing:-.02em;line-height:1.1}h1 span{color:#73d5ff}.eyebrow{margin:0;color:#b9d8f2;font-size:11px;font-weight:600;letter-spacing:.12em}.status{z-index:1;padding:6px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#e5f3ff;background:#ffffff1a;font-size:12px}.status.online{border-color:#6aee9c8c;color:#b7f7ce}.status.error{border-color:#ff99a4a6;color:#ffc5ca}#board,.login-panel{padding:32px}.login-panel{max-width:640px}.login-panel h2{margin-top:0}.login-panel p{max-width:38rem;color:#616161;line-height:1.5}form{display:grid;margin:24px 0 32px}label{margin:16px 0 8px;color:#323130;font-size:12px;font-weight:600}input,textarea{width:100%;padding:13px 16px;border:1px solid #c7c7c7;border-bottom-color:#8a8886;color:#242424;background:#f7f7f7;outline:0;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease}input{min-height:48px}textarea{min-height:120px;resize:vertical;line-height:1.5}input:hover,textarea:hover{border-color:#8a8886;background:#fff}input:focus,textarea:focus{border-color:#0f6cbd;box-shadow:inset 0 -2px #0f6cbd,0 0 0 1px #0f6cbd1f}input::placeholder,textarea::placeholder{color:#707070;opacity:1}button{min-height:40px;padding:11px 16px;border:0;cursor:pointer;color:#fff;background:#0f6cbd;box-shadow:0 2px 4px #0f6cbd38;font-weight:600;transition:background-color .1s ease,box-shadow .1s ease,transform .1s ease}button:hover{background:#115ea3;box-shadow:0 4px 10px #0f6cbd3d}button:active{background:#0c3b5e;box-shadow:none;transform:translateY(1px)}button:focus-visible{outline:2px solid #0f6cbd;outline-offset:2px}form>button{min-width:128px;justify-self:end;margin-top:24px}.composer-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.composer-actions span{color:#707070;font-size:12px}.composer-actions button{min-width:160px}.ghost{color:#0f6cbd;background:transparent;box-shadow:none}.ghost:hover{color:#fff;background:#0f6cbd}.login-panel form{margin-bottom:0}.user-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #e1dfdd;color:#605e5c;font-size:13px}.section-title{margin-top:40px;border-bottom:1px solid #c8c6c4}h2{margin:16px 0;font-size:20px;font-weight:400}.snippets{display:grid;gap:10px}.snippet{padding:20px 16px 16px;border:1px solid #e1dfdd;border-radius:10px;background:#fff;box-shadow:0 1px 2px #0000000a;content-visibility:auto;contain-intrinsic-size:120px;transition:border-color .1s ease,box-shadow .1s ease,transform .1s ease}.snippet:hover{border-color:#b7d7f0;box-shadow:0 5px 16px #1e4b731a;transform:translateY(-1px)}.snippet p{margin:0 0 18px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}.snippet time{margin-right:auto;color:#707070;font-size:12px}.snippet-actions{justify-content:flex-end}.snippet-actions button{min-height:32px;padding:7px 12px;color:#0f6cbd;background:transparent;box-shadow:none;font-size:12px}.snippet-actions button:hover{color:#fff;background:#0f6cbd}.snippet-actions .remove{color:#c50f1f}.snippet-actions .remove:hover{color:#fff;background:#c50f1f}.empty{margin:0;padding:48px 16px;border-radius:10px;text-align:center;color:#707070;background:#f7f7f7}@media (max-width: 600px){body{background:#fff}#app{padding:0;background:#fff}.shell{min-height:100vh;border:0;border-radius:0;box-shadow:none}header{min-height:64px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));align-items:center}header:after{display:none}h1{margin:0;font-size:24px;font-weight:400}.eyebrow{display:none}.status{padding:4px 8px;font-size:11px}#board,.login-panel{max-width:none;padding:16px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left))}.login-panel h2{margin-bottom:8px;font-size:18px}.login-panel p{margin:0;font-size:13px}form{margin:12px 0 20px}label{margin:12px 0 6px}input{min-height:44px}textarea{min-height:88px;padding:12px}form>button{width:100%;min-height:48px;margin-top:16px}.user-bar{padding-bottom:8px}.user-bar .ghost,.section-title .ghost{min-height:40px;padding:8px 12px}#snippet-form{margin-top:12px}.composer-actions{align-items:stretch;flex-direction:column;margin-top:8px}.composer-actions span{display:none}.composer-actions button{width:100%;min-height:48px}.section-title{margin-top:24px}.section-title h2{margin:12px 0;font-size:18px}.snippets{gap:0}.snippet{padding:16px 0 12px;border-width:0 0 1px;border-radius:0;box-shadow:none}.snippet:hover{border-color:#e1dfdd;box-shadow:none;transform:none}.snippet p{margin-bottom:10px}.snippet-actions{gap:4px}.snippet-actions button{min-height:44px;padding:10px 12px}.empty{padding:32px 12px;border-radius:0}}@media (pointer: coarse){button{min-height:44px}}@media (prefers-reduced-motion: reduce){button,input,textarea,.snippet{transition:none}}