:root{--p:#c41e3a;--p2:#e63950;--bg:#0d0d0d;--cb:#1a1a2e;--t:#e8e8e8;--b:#2a2a3e;--s:0 8px 32px rgba(0,0,0,.4);--r:14px;--ch:200px;--cols:1;--sb:env(safe-area-inset-bottom)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--t);min-height:100vh;padding-top:52px;padding-bottom:80px;overflow-x:hidden}

#topBar{position:fixed;top:0;left:0;right:0;height:52px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;z-index:100;background:linear-gradient(180deg,var(--bg),transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.t-left,.t-right{display:flex;align-items:center;gap:8px}
#brand{font-weight:800;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;background:linear-gradient(135deg,var(--p),#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.badge{background:var(--p);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;min-width:18px;text-align:center}

.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--b);background:var(--cb);color:var(--t);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:13px}
.icon-btn:hover{transform:scale(1.1);border-color:var(--p)}
.icon-btn:active{transform:scale(.9)}

#grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:12px;padding:12px;max-width:900px;margin:0 auto;min-height:50vh}

#grid:empty~.empty-state{display:flex}
.empty-state{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--t);opacity:.3;pointer-events:none;text-align:center}
.empty-icon{font-size:48px;margin-bottom:8px;opacity:.5}
.empty-state h3{font-size:18px;font-weight:600}
.empty-state p{font-size:13px;opacity:.6}
.empty-hints{display:flex;gap:16px;margin-top:16px;font-size:11px;opacity:.4}
.empty-hints span{display:flex;align-items:center;gap:4px}

.card{min-height:var(--ch);border-radius:var(--r);overflow:hidden;position:relative;background:var(--cb);border:1px solid var(--b);box-shadow:var(--s);transition:transform .2s,box-shadow .2s;touch-action:manipulation;cursor:pointer}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(196,30,58,.2)}
.card:active{transform:scale(.98)}
.card.sel{border-color:var(--p);box-shadow:0 0 0 2px var(--p),var(--s)}
.card.locked::after{content:'🔒';position:absolute;top:8px;right:8px;z-index:5;font-size:11px}
.card.new{animation:slideIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes slideIn{0%{opacity:0;transform:translateY(30px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
.card-body{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d;min-height:inherit}
.card.flip .card-body{transform:rotateY(180deg)}
.face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;padding:14px;min-height:inherit;background:var(--cb);color:var(--t);font-size:14px;line-height:1.5;overflow:hidden}
.face.back{transform:rotateY(180deg)}
.face-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;border-bottom:1px solid var(--b);padding-bottom:6px;flex-shrink:0;font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.4}
.face-h .actions{display:flex;gap:2px}
.face-h .actions button{background:none;border:none;color:var(--t);cursor:pointer;padding:4px;opacity:.4;border-radius:4px;transition:all .2s;min-width:28px;min-height:28px;font-size:11px}
.face-h .actions button:hover{opacity:1;background:rgba(255,255,255,.08)}
.face-c{flex:1;overflow-y:auto;word-wrap:break-word}
.face-c h1,.face-c h2,.face-c h3{color:var(--p);margin:.4em 0;font-size:1.1em}
.face-c p{margin-bottom:.6em}
.face-c ul,.face-c ol{margin-left:1.2em;margin-bottom:.6em}
.face-c blockquote{border-left:3px solid var(--p);padding-left:10px;margin:.8em 0;opacity:.8;font-style:italic}
.face-c code{background:rgba(255,255,255,.08);padding:2px 5px;border-radius:3px;font-family:monospace;font-size:.9em}
.face-c pre{background:rgba(255,255,255,.04);padding:10px;border-radius:6px;overflow-x:auto;margin:.8em 0;border:1px solid var(--b)}
.face-c pre code{background:none;padding:0}

.thinking{display:flex;align-items:center;justify-content:center;gap:10px;padding:20px;color:#888}
.thinking span{color:var(--p);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px;animation:pulse 1.5s infinite}
@keyframes pulse{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}
.cursor{display:inline-block;width:2px;height:14px;background:var(--p);animation:blink .8s infinite}
@keyframes blink{50%{opacity:0}}

#selectionBar{position:fixed;top:0;left:0;right:0;background:var(--cb);border-bottom:1px solid var(--b);padding:8px 12px;z-index:200;display:none;align-items:center;justify-content:space-between;transform:translateY(-100%);transition:transform .3s}
#selectionBar.show{display:flex;transform:translateY(0)}
.sel-left,.sel-right{display:flex;align-items:center;gap:6px}
#selCount{font-weight:700;font-size:14px;margin-left:6px}
.sel-btn{background:var(--p);color:#fff;border:none;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:4px;transition:all .2s}
.sel-btn:hover{filter:brightness(1.2)}
.sel-btn.danger{background:#d32f2f}

.input-area{position:fixed;bottom:0;left:0;right:0;background:var(--cb);border-top:1px solid var(--b);padding:10px 12px;display:flex;gap:8px;z-index:100;align-items:center;padding-bottom:calc(10px + var(--sb))}
#input{flex:1;padding:10px 16px;border-radius:22px;border:1px solid var(--b);background:var(--bg);color:var(--t);font-size:15px;outline:none;transition:border .2s;height:42px}
#input:focus{border-color:var(--p)}
#sendBtn{background:var(--p);color:#fff;border:none;width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;font-size:15px}
#sendBtn:hover{background:var(--p2);transform:scale(1.05)}
#sendBtn:active{transform:scale(.9)}

.fab{position:fixed;z-index:90;width:42px;height:42px;border-radius:50%;border:1px solid var(--b);background:var(--cb);color:var(--t);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--s);transition:all .2s;font-size:15px;backdrop-filter:blur(8px)}
.fab:hover{transform:scale(1.1)}
.fab.view-fab{bottom:76px;right:12px}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:300;display:none;align-items:center;justify-content:center}
.overlay.show{display:flex}

.modal{background:var(--cb);border-radius:16px;width:92%;max-width:520px;max-height:85vh;border:1px solid var(--b);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;animation:modalIn .25s ease}
@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.modal-h{padding:14px 18px;border-bottom:1px solid var(--b);display:flex;justify-content:space-between;align-items:center}
.modal-h h3{font-size:15px}
.modal-b{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.modal-f{padding:14px 18px;border-top:1px solid var(--b);display:flex;justify-content:flex-end;gap:10px}

.btn{padding:9px 18px;border-radius:8px;border:1px solid var(--b);cursor:pointer;font-size:13px;font-weight:600;background:transparent;color:var(--t);transition:all .2s}
.btn:hover{filter:brightness(1.2)}
.btn.primary{background:var(--p);color:#fff;border:none}
.btn-group{display:flex;gap:6px;flex-wrap:wrap}
.tgl{padding:6px 12px;border:1px solid var(--b);border-radius:6px;font-size:12px;cursor:pointer;background:transparent;color:var(--t);transition:all .2s;display:flex;align-items:center;gap:4px}
.tgl:hover{border-color:var(--p)}
.tgl.on{background:var(--p);color:#fff;border-color:var(--p)}
.tgl.danger:hover{border-color:#d32f2f;background:#d32f2f10}
.tgl.danger.on{border-color:#d32f2f;background:#d32f2f;color:#fff}
input[type="text"],textarea{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--b);background:var(--bg);color:var(--t);font-family:inherit;font-size:14px;outline:none}
input[type="text"]:focus,textarea:focus{border-color:var(--p)}
textarea{min-height:80px;resize:vertical}
small{font-size:11px;opacity:.5}

.section h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.6;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.cp{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;opacity:.7}
.cp input{width:36px;height:28px;border:none;padding:0;border-radius:4px;cursor:pointer}
.sl{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;opacity:.7}
.sl input{flex:1}
.ck{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.7;padding:8px;background:rgba(255,255,255,.03);border-radius:6px}
.desc{font-size:12px;opacity:.6;margin-bottom:4px}

.ctx-menu{position:fixed;background:var(--cb);border:1px solid var(--b);border-radius:12px;padding:6px;display:none;flex-direction:column;z-index:400;box-shadow:0 10px 40px rgba(0,0,0,.6);min-width:180px}
.ctx-menu.show{display:flex;animation:menuIn .15s ease}
@keyframes menuIn{0%{opacity:0;transform:scale(.95)}100%{opacity:1;transform:scale(1)}}
.ctx-menu button{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;cursor:pointer;color:var(--t);background:transparent;border:none;width:100%;text-align:left;font-size:13px;transition:background .1s}
.ctx-menu button:active{background:rgba(255,255,255,.08)}
.ctx-menu button i{width:18px;text-align:center;font-size:12px}
.ctx-menu hr{height:1px;background:var(--b);margin:4px 0;border:none}
.ctx-menu .danger{color:#ff5252}

#fullscreen{flex-direction:column;padding:0;align-items:stretch;justify-content:flex-start;background:var(--bg)}
#fullscreen.show{display:flex}
.fs-header{padding:10px 14px;background:var(--cb);border-bottom:1px solid var(--b);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.fs-left,.fs-right{display:flex;gap:6px}
.fs-body{flex:1;overflow-y:auto;padding:20px 24px;font-size:1.1rem;line-height:1.7}
.fs-body h1,.fs-body h2,.fs-body h3{color:var(--p);margin:1em 0 .4em}
.fs-body p{margin-bottom:1em}

#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--cb);border:1px solid var(--b);color:var(--t);padding:8px 16px;border-radius:20px;font-size:12px;z-index:500;opacity:0;transition:all .3s;pointer-events:none;box-shadow:var(--s)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

body.view-grid{--cols:2}
body.view-full{--cols:1}
body.view-full #grid{display:block;padding:0;gap:0}
body.view-full #grid .card{height:100vh;border-radius:0;border:none;min-height:unset}

@media(max-width:600px){
body.view-grid{--cols:2}
#grid{gap:8px;padding:8px}
.input-area{padding:8px 10px;padding-bottom:calc(8px + var(--sb))}
#input{padding:9px 14px;font-size:15px;height:40px}
#sendBtn{width:40px;height:40px;font-size:14px}
#topBar{height:48px;padding:0 10px}
.icon-btn{width:32px;height:32px;font-size:12px}
.fab.view-fab{bottom:70px;right:10px;width:38px;height:38px;font-size:13px}
.card{min-height:160px}
.face{font-size:13px;padding:12px}
.ctx-menu{min-width:160px;left:50%!important;transform:translateX(-50%)!important;top:auto!important;bottom:70px}
}