*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:#0c0d10;color:#e7e9ee;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}a{color:#6ea8ff;text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit}input,textarea,select{font-family:inherit;font-size:14px;background:#15171c;color:#e7e9ee;border:1px solid #262932;border-radius:10px;padding:9px 12px;outline:none;transition:border-color .12s ease,box-shadow .12s ease}input:focus,textarea:focus,select:focus{border-color:#6ea8ff;box-shadow:0 0 0 3px #6ea8ff2e}textarea{resize:vertical;min-height:110px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:13px}.app-shell{min-height:100%;display:flex;flex-direction:column}.app-shell--centered{align-items:center;justify-content:center}.brand-mark{color:#6ea8ff;font-size:18px}.brand-name{font-weight:600;letter-spacing:.3px}.login-card{width:min(380px,92vw);background:#15171c;border:1px solid #262932;border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 24px #00000073}.login-card__brand{display:flex;align-items:center;gap:8px;font-size:18px}.login-card__sub{margin:-4px 0 6px;color:#8e95a3;font-size:13px}.field{display:flex;flex-direction:column;gap:6px}.field>span{font-size:12px;color:#8e95a3;text-transform:uppercase;letter-spacing:.5px}.field__hint{color:#5b616e;text-transform:none;letter-spacing:0;font-style:normal;font-size:11px;margin-left:4px}.field--inline{flex-direction:row;align-items:center;gap:10px}.field--inline>span{text-transform:none;letter-spacing:0;color:#e7e9ee;font-size:14px}.field--inline input[type=checkbox]{width:18px;height:18px;accent-color:#6ea8ff}.form-error{background:#ff6b6b1a;border:1px solid rgba(255,107,107,.4);color:#ff6b6b;padding:8px 12px;border-radius:10px;font-size:13px}.btn{border:1px solid transparent;border-radius:10px;padding:9px 14px;cursor:pointer;font-size:14px;font-weight:500;transition:background .12s ease,border-color .12s ease,transform 60ms ease}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:active:not(:disabled){transform:translateY(1px)}.btn--primary{background:#4f8dff;color:#fff}.btn--primary:hover:not(:disabled){background:#699eff}.btn--ghost{background:transparent;color:#e7e9ee;border-color:#262932}.btn--ghost:hover:not(:disabled){background:#15171c;border-color:#353945}.btn--danger{background:transparent;color:#ff6b6b;border-color:#ff6b6b59}.btn--danger:hover:not(:disabled){background:#ff6b6b14;border-color:#ff6b6b}.btn--mini{padding:5px 9px;font-size:12px;border-color:#262932;background:transparent;color:#8e95a3}.btn--mini:hover:not(:disabled){color:#e7e9ee;border-color:#353945}.topbar{display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid #262932;background:#0f1115d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}.topbar__brand{display:flex;align-items:center;gap:8px;font-size:16px}.topbar__search{flex:1;max-width:480px}.topbar__search input{width:100%}.topbar__user{display:flex;align-items:center;gap:12px}.topbar__email{color:#8e95a3;font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:22px 24px 60px}.content__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}.categories{display:flex;flex-wrap:wrap;gap:6px}.chip{background:#15171c;border:1px solid #262932;color:#8e95a3;padding:5px 10px;border-radius:999px;font-size:12px;cursor:pointer;transition:all .12s ease}.chip:hover{color:#e7e9ee;border-color:#353945}.chip--active{background:#6ea8ff1a;color:#6ea8ff;border-color:#6ea8ff66}.empty{display:flex;align-items:center;justify-content:center;min-height:200px;color:#8e95a3}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.card{background:#15171c;border:1px solid #262932;border-radius:14px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;transition:border-color .12s ease,transform .12s ease}.card:hover{border-color:#353945}.card--pinned{border-color:#ffd66e59;background:linear-gradient(180deg,#ffd66e0a,#15171c 60%)}.card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.card__title{margin:0;font-size:15px;font-weight:600;word-break:break-word}.card__pin{background:transparent;border:none;color:#ffd66e;cursor:pointer;font-size:18px;line-height:1;padding:0;opacity:.55}.card__pin[aria-pressed=true],.card__pin:hover{opacity:1}.card__url{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:12px;color:#6ea8ff;word-break:break-all}.card__notes{margin:0;color:#8e95a3;font-size:13px;white-space:pre-wrap;word-break:break-word;max-height:160px;overflow:hidden;position:relative}.card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}.card__actions{display:flex;gap:6px;margin-left:auto}.tag{background:#1c1f26;color:#8e95a3;font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid #262932}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}.modal__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal__panel{position:relative;width:min(560px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:#15171c;border:1px solid #262932;border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 24px #00000073}.modal__panel h2{margin:0 0 4px;font-size:18px}.modal__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.loader{width:22px;height:22px;border:2px solid #262932;border-top-color:#6ea8ff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:600px){.topbar{flex-wrap:wrap;padding:12px 14px}.topbar__search{order:3;flex-basis:100%;max-width:100%}.content{padding:16px 14px 60px}}
