.hln-demo{display:flex;align-items:stretch;justify-content:center;gap:24px;direction:ltr;padding:40px 20px;position:relative}@media(max-width:860px){.hln-demo{flex-direction:column-reverse;gap:16px;align-items:center}}.hln-canvas{position:relative;flex:1 1 0;max-width:520px;min-width:280px;background:#2d2d2d;border-radius:8px;overflow:hidden;box-shadow:0 4px 24px #00000080;opacity:0;transition:opacity .5s ease}.hln-canvas.visible{opacity:1}.hln-ruler-top,.hln-ruler-left{position:absolute;background:#3a3a3a;z-index:3}.hln-ruler-top{top:0;left:18px;right:0;height:18px;border-bottom:1px solid #555}.hln-ruler-left{top:18px;left:0;bottom:0;width:18px;border-right:1px solid #555}.hln-ruler-corner{position:absolute;top:0;left:0;width:18px;height:18px;background:#3a3a3a;z-index:4}.hln-ruler-top:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,#666 0,#666 1px,transparent 1px,transparent 50px),repeating-linear-gradient(90deg,#555 0,#555 1px,transparent 1px,transparent 10px);background-size:100% 14px,100% 6px;background-position:0 bottom;background-repeat:repeat-x}.hln-ruler-left:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(180deg,#666 0,#666 1px,transparent 1px,transparent 50px),repeating-linear-gradient(180deg,#555 0,#555 1px,transparent 1px,transparent 10px);background-size:14px 100%,6px 100%;background-position:right 0;background-repeat:repeat-y}.hln-ab-area{position:absolute;top:18px;left:18px;right:0;bottom:0;display:flex;align-items:stretch;justify-content:center;padding:24px 20px 20px}.hln-ab-wrap{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.hln-ab-label{position:absolute;bottom:100%;left:0;margin-bottom:3px;font:9px -apple-system,sans-serif;color:#888;z-index:3}.hln-artboard{position:relative;width:100%;flex:1;background:#fff;box-shadow:0 2px 12px #0006;overflow:hidden}.hln-el{position:absolute;border-radius:3px;display:flex;align-items:center;justify-content:center;font:600 10px -apple-system,sans-serif;color:#fff;opacity:0;transition:all .8s cubic-bezier(.4,0,.2,1);z-index:2;overflow:visible}.hln-el.show{opacity:1}.hln-el.highlight{box-shadow:0 0 0 2px #fff,0 0 0 4px #ffa726;z-index:3}.hln-el.selected{box-shadow:0 0 0 2px #3884ff;z-index:3}.hln-el[data-el=title]{background:#3884ffbf}.hln-el[data-el=image]{background:#a875e8a6}.hln-el[data-el=text]{background:#3ddc84a6}.hln-el[data-el=button]{background:#ffa726bf}.hln-el[data-el=nav]{background:#3884ff8c}.hln-el[data-el=logo]{background:#a875e8a6}.hln-el .note-dot{position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;z-index:5;box-shadow:0 1px 4px #0006;transform:scale(0);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.hln-el .note-dot.visible,.hln-el .note-dot.show{transform:scale(1)}.hln-el .note-dot.dot-blue{background:#3884ff}.hln-el .note-dot.dot-gold{background:#e5c07b}.hln-el .note-dot.dot-red{background:#ff5c5c}.hln-el .note-dot.dot-green{background:#3ddc84}.hln-canvas .hln-el.active-pulse{animation:elPulse 1.5s ease infinite}@keyframes elPulse{0%,to{box-shadow:0 0 #3884ff66}50%{box-shadow:0 0 0 8px #3884ff00}}.hln-canvas .hln-el.sync-flash{animation:syncFlash .6s ease}@keyframes syncFlash{0%{filter:brightness(1)}50%{filter:brightness(1.6)}to{filter:brightness(1)}}.hln-demo .connection-line{position:absolute;height:2px;background:linear-gradient(90deg,#3884ff99,#3884ff00);transform-origin:left center;transform:scaleX(0);transition:transform .5s ease;z-index:50;pointer-events:none}.hln-demo .connection-line.visible{transform:scaleX(1)}.hln-p{--bg-1:#0e0f14;--bg-2:#151821;--glass-1:rgba(255,255,255,.04);--glass-2:rgba(255,255,255,.07);--glass-3:rgba(255,255,255,.11);--glass-hover:rgba(255,255,255,.14);--bd-1:rgba(255,255,255,.08);--bd-2:rgba(255,255,255,.14);--bd-3:rgba(255,255,255,.22);--hl-1:inset 0 1px 0 rgba(255,255,255,.08);--hl-2:inset 0 1px 0 rgba(255,255,255,.15);--sh-sm:0 1px 2px rgba(0,0,0,.3);--sh-md:0 4px 16px rgba(0,0,0,.4);--text:rgba(255,255,255,.95);--text-2:rgba(255,255,255,.78);--text-3:rgba(255,255,255,.6);--muted:rgba(255,255,255,.42);--muted-2:rgba(255,255,255,.28);--accent:#3884ff;--accent-2:#5a9dff;--accent-border:rgba(56,132,255,.45);--blue-grad:linear-gradient(180deg,#4a94ff,#2d76ef);--green-grad:linear-gradient(180deg,#3ddc84,#28a965);--red-grad:linear-gradient(180deg,#ff5c5c,#e23a3a);--purple-grad:linear-gradient(180deg,#a875e8,#7c5cbf);--gold:#e5c07b;--warn:#ffa726;--r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:16px;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;--fs-micro:9px;--fs-note:10px;--fs-body:11px;--fs-base:12px;width:320px;flex-shrink:0;position:relative;font:12px/1.5 var(--font);color:var(--text-2);padding:var(--s-3);direction:rtl;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse 600px 400px at 20% 0%,rgba(56,132,255,.12),transparent 60%),radial-gradient(ellipse 500px 300px at 80% 100%,rgba(255,159,10,.08),transparent 60%),linear-gradient(180deg,var(--bg-1),var(--bg-2));border-radius:16px;box-shadow:0 0 80px #3884ff26,0 8px 32px #0009;overflow:hidden;opacity:0;transition:opacity .5s ease;box-sizing:border-box}.hln-p.visible{opacity:1}.hln-p *,.hln-p *:before,.hln-p *:after{box-sizing:border-box;margin:0;padding:0}.hln-p .status-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--glass-1);border:1px solid var(--bd-1);border-radius:var(--r-sm);margin-bottom:8px;font-size:var(--fs-body);color:var(--muted)}.hln-p .status-dot{width:6px;height:6px;border-radius:50%;background:#3ddc84;box-shadow:0 0 6px #3ddc8466;flex-shrink:0}.hln-p .tabs{display:flex;gap:4px;margin-bottom:12px;background:var(--glass-1);border:1px solid var(--bd-1);border-radius:var(--r-md);padding:4px;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--hl-1),var(--sh-sm)}.hln-p .tab-btn{flex:1;padding:8px;background:transparent;color:var(--text-3);border:none;border-radius:var(--r-sm);cursor:pointer;font:600 11px var(--font)}.hln-p .tab-btn.active{background:var(--glass-3);color:var(--text);box-shadow:var(--hl-2),var(--sh-sm)}.hln-p .lang-btn{flex:0 0 auto;padding:6px 10px;background:linear-gradient(135deg,#e5c07b,#d4a855);color:#1a1a2e;border:1px solid rgba(229,192,123,.5);border-radius:var(--r-sm);cursor:pointer;font:800 11px var(--font);min-width:40px;text-align:center;box-shadow:0 2px 6px #e5c07b4d}.hln-p .theme-btn{flex:0 0 auto;padding:5px 8px;background:var(--glass-2);border:1px solid var(--bd-1);border-radius:var(--r-sm);cursor:pointer;font-size:12px;line-height:1}.hln-p .sec{background:var(--glass-1);border:1px solid var(--bd-1);border-radius:var(--r-md);padding:12px 16px;margin-bottom:8px;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--hl-1),var(--sh-sm);overflow:hidden}.hln-p .sec-t{font:600 11px var(--font);color:var(--text-2);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bd-1)}.hln-p .fade-section{opacity:0;max-height:0;overflow:hidden;transition:opacity .4s ease,max-height .4s ease}.hln-p .fade-section.visible{opacity:1;max-height:500px}.hln-p .row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.hln-p .row:last-child{margin-bottom:0}.hln-p label{font:500 11px var(--font);color:var(--text-3);white-space:nowrap;flex-shrink:0}.hln-p input[type=text],.hln-p select{background:#ffffff0f;border:1px solid var(--bd-1);color:var(--text);border-radius:var(--r-sm);padding:0 8px;height:32px;font:12px var(--font);outline:none;box-shadow:var(--hl-1);line-height:32px}.hln-p input[type=text]{width:100%}.hln-p textarea{width:100%;min-height:50px;background:#ffffff0f;border:1px solid var(--bd-1);border-radius:var(--r-sm);color:var(--text);font:12px var(--font);padding:8px 10px;resize:none;outline:none;box-shadow:var(--hl-1);line-height:1.5}.hln-p input.focus,.hln-p textarea.focus{border-color:#3884ff73!important;background:#ffffff17!important}.hln-p .btn{padding:9px 12px;border:1px solid var(--bd-1);border-radius:var(--r-sm);cursor:pointer;font:600 12px var(--font);color:#fff;background:var(--glass-2);box-shadow:var(--hl-1),var(--sh-sm)}.hln-p .btn-blue{background:var(--blue-grad);border-color:var(--accent-border);box-shadow:var(--hl-2),0 2px 8px #3884ff4d}.hln-p .btn-green{background:var(--green-grad);border-color:#3ddc8473;box-shadow:var(--hl-2),0 2px 8px #3ddc844d}.hln-p .btn-gray{background:var(--glass-2);border-color:var(--bd-1);color:var(--text)}.hln-p .btn-red{background:var(--red-grad);border-color:#ff5c5c73;box-shadow:var(--hl-2),0 2px 8px #ff5c5c40}.hln-p .btn-ghost{background:var(--glass-2);border-color:var(--bd-1);color:var(--text)}.hln-p .btn-sm{padding:6px 12px;font-size:11px}.hln-p .btn-full{width:100%;margin-top:4px}.hln-p .btn-row{display:flex;gap:4px;margin-top:8px;max-width:100%;overflow:hidden}.hln-p .btn-row .btn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hln-p .pri-badge{display:inline-block;padding:2px 8px;border-radius:var(--r-xs);font-size:var(--fs-micro);font-weight:600;border:1px solid transparent;transition:all .4s ease}.hln-p .pri-badge.pri-normal{background:#3884ff1f;color:var(--accent-2);border-color:#3884ff40}.hln-p .pri-badge.pri-important{background:#e5c07b1f;color:var(--gold);border-color:#e5c07b40}.hln-p .pri-badge.pri-urgent{background:#ff5c5c1f;color:#f99;border-color:#ff5c5c40}.hln-p .pri-selector{display:flex;gap:4px;margin:8px 0}.hln-p .pri-btn{flex:1;padding:7px 0;border:1px solid var(--bd-1);border-radius:var(--r-sm);background:var(--glass-1);color:var(--text-3);font:600 11px var(--font);cursor:pointer;transition:all .3s ease}.hln-p .pri-btn.active.normal{border-color:var(--accent-border);color:var(--accent-2);background:#3884ff1a}.hln-p .pri-btn.active.important{border-color:#e5c07b73;color:var(--gold);background:#e5c07b1a}.hln-p .pri-btn.active.urgent{border-color:#ff5c5c73;color:#f99;background:#ff5c5c1a}.hln-p .note-card{padding:10px 12px;background:var(--glass-2);border:1px solid var(--bd-1);border-radius:var(--r-md);cursor:pointer;border-right:3px solid transparent;box-shadow:var(--hl-1),0 1px 3px #00000026;position:relative;overflow:hidden;margin-bottom:6px;transition:all .4s ease,opacity .3s ease,transform .3s ease,max-height .4s ease,padding .4s ease,margin .4s ease,border-width .4s ease}.hln-p .note-card.pri-normal-card{border-right-color:var(--accent)}.hln-p .note-card.pri-important-card{border-right-color:var(--gold);background:#e5c07b0a}.hln-p .note-card.pri-urgent-card{border-right-color:#ff5c5c;background:#ff5c5c0d}.hln-p .note-card.done{opacity:.55}.hln-p .note-card.done .card-text{text-decoration:line-through}.hln-p .note-card.hidden-card{opacity:0;transform:scale(.95);max-height:0;padding:0;margin:0;border-width:0;overflow:hidden}.hln-p .note-card.batch-selected{border-color:var(--accent-border);background:#3884ff14}.hln-p .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.hln-p .card-header-left{display:flex;align-items:center;gap:6px}.hln-p .done-circle{width:16px;height:16px;border-radius:50%;border:2px solid var(--bd-2);background:none;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:transparent;flex-shrink:0;transition:all .2s ease}.hln-p .done-circle.checked{background:#3ddc84;border-color:#3ddc84;color:#fff;box-shadow:0 0 6px #3ddc844d}.hln-p .batch-check{width:16px;height:16px;border-radius:4px;border:2px solid var(--bd-2);background:none;display:none;align-items:center;justify-content:center;font-size:9px;color:transparent;flex-shrink:0;transition:all .2s ease;opacity:0}.hln-p .batch-check.show{display:inline-flex;opacity:1}.hln-p .batch-check.checked{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 6px #3884ff4d}.hln-p .card-name{font-size:var(--fs-base);color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.hln-p .pin-icon{font-size:11px;opacity:.4}.hln-p .pin-icon.pinned{opacity:1}.hln-p .card-author{font-size:var(--fs-micro);color:var(--accent-2);margin-bottom:2px;font-weight:500}.hln-p .card-text{font-size:var(--fs-body);color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.7;margin:2px 0}.hln-p .card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.hln-p .tag{display:inline-block;padding:1px 7px;background:#3884ff14;border:1px solid rgba(56,132,255,.15);border-radius:12px;font-size:8px;color:var(--accent-2)}.hln-p .card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:6px;border-top:1px solid var(--bd-1);font-size:var(--fs-micro);color:var(--muted)}.hln-p .search-wrap{position:relative;margin-bottom:8px}.hln-p .search-wrap input{width:100%;padding:0 10px 0 28px;height:34px;background:var(--glass-2);border:1px solid var(--bd-1);border-radius:var(--r-md);color:var(--text);font:12px var(--font);outline:none;box-shadow:var(--hl-1);direction:rtl}.hln-p .search-wrap:before{content:"\1f50d";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.4;pointer-events:none;z-index:1}.hln-p .filter-bar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}.hln-p .filter-btn{padding:5px 10px;border:1px solid var(--bd-1);border-radius:20px;background:var(--glass-1);color:var(--muted);font-size:var(--fs-note);font-weight:600;font-family:var(--font);cursor:pointer;transition:all .3s ease}.hln-p .filter-btn.active{background:#3884ff26;color:var(--accent-2);border-color:var(--accent-border)}.hln-p .filter-btn.f-urgent.active{background:#ff5c5c26;color:#f99;border-color:#ff5c5c59}.hln-p .filter-btn.f-important.active{background:#e5c07b26;color:var(--gold);border-color:#e5c07b59}.hln-p .sort-bar{display:flex;gap:4px;align-items:center;margin-bottom:8px}.hln-p .sort-label{font-size:var(--fs-micro);color:var(--muted);margin-inline-end:4px;font-weight:600}.hln-p .sort-btn{padding:3px 8px;border:1px solid transparent;border-radius:var(--r-xs);background:none;color:var(--muted);font-size:var(--fs-micro);font-weight:500;font-family:var(--font);cursor:pointer;transition:all .3s ease}.hln-p .sort-btn.active{color:var(--accent-2);background:#3884ff1a;border-color:var(--accent-border)}.hln-p .note-display{overflow:hidden;transition:opacity .4s ease}.hln-p .view-meta-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}.hln-p .note-text-view{font-size:13px;color:var(--text);line-height:1.7;margin:8px 0;white-space:pre-wrap;word-break:break-word}.hln-p .note-text-view.is-done{text-decoration:line-through;opacity:.55}.hln-p .note-meta{font-size:var(--fs-micro);color:var(--muted);margin-top:4px}.hln-p .note-element-name{font-size:var(--fs-body);color:var(--text-3);margin-bottom:4px;font-weight:500}.hln-p .note-author{font-size:var(--fs-micro);color:var(--muted);margin-bottom:4px}.hln-p .note-tags-view{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}.hln-p .pin-btn{background:none;border:none;cursor:pointer;font-size:12px;opacity:.4;padding:2px;transition:opacity .3s ease}.hln-p .pin-btn.pinned{opacity:1}.hln-p .done-toggle{width:22px;height:22px;border-radius:50%;border:2px solid var(--bd-2);background:none;color:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}.hln-p .done-toggle.checked{background:#3ddc84;border-color:#3ddc84;color:#fff}.hln-p .replies-section{margin-top:8px;border-top:1px solid var(--bd-1);padding-top:8px}.hln-p .replies-header{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-body);color:var(--text-3);font-weight:500;cursor:pointer}.hln-p .replies-toggle-icon{font-size:10px;color:var(--muted);transition:transform .3s ease}.hln-p .replies-toggle-icon.open{transform:rotate(180deg)}.hln-p .replies-body{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .4s ease}.hln-p .replies-body.visible{max-height:400px;opacity:1}.hln-p .reply-item{padding:4px 0;border-bottom:1px solid var(--bd-1)}.hln-p .reply-item:last-child{border-bottom:none}.hln-p .reply-author{font-size:var(--fs-micro);color:var(--accent-2);font-weight:600}.hln-p .reply-text{font-size:var(--fs-body);color:var(--text-2);margin-top:1px}.hln-p .reply-date{font-size:8px;color:var(--muted);margin-top:1px}.hln-p .reply-form{display:flex;gap:4px;margin-top:8px}.hln-p .reply-input{flex:1;height:28px;padding:4px 8px;background:#ffffff0f;border:1px solid var(--bd-1);border-radius:var(--r-sm);color:var(--text);font:11px var(--font);outline:none}.hln-p .reply-item.new-reply{animation:slideInReply .4s ease forwards}@keyframes slideInReply{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hln-p .toggle{position:relative;width:36px;height:20px;background:var(--glass-2);border:1px solid var(--bd-1);border-radius:10px;cursor:pointer;transition:all .2s;flex-shrink:0}.hln-p .toggle.on{background:var(--accent);border-color:var(--accent-border)}.hln-p .toggle:after{content:"";position:absolute;top:2px;right:2px;width:14px;height:14px;background:var(--text);border-radius:50%;transition:transform .2s;box-shadow:var(--sh-sm)}.hln-p .toggle.on:after{transform:translate(-16px)}.hln-p .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0}.hln-p .toggle-label{font-size:var(--fs-body);color:var(--text-3);font-weight:500}.hln-p .batch-bar{display:flex;padding:8px 10px;background:linear-gradient(180deg,#3884ff2e,#3884ff14);border:1px solid var(--accent-border);border-radius:var(--r-sm);margin-top:8px;gap:4px;align-items:center;transform:translateY(100%);opacity:0;transition:transform .3s ease,opacity .3s ease;overflow:hidden;max-height:0}.hln-p .batch-bar.visible{transform:translateY(0);opacity:1;max-height:60px}.hln-p .batch-info{font-size:var(--fs-body);color:var(--accent-2);flex:1;font-weight:600}.hln-p .export-dropdown{position:relative;display:inline-block}.hln-p .export-menu{position:absolute;bottom:calc(100% + 4px);right:0;left:0;background:var(--bg-2);border:1px solid var(--bd-2);border-radius:var(--r-sm);padding:4px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--sh-md);z-index:50;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.hln-p .export-menu.show{opacity:1;transform:translateY(0);pointer-events:auto}.hln-p .export-opt{padding:6px 10px;border:none;background:none;color:var(--text-2);font:11px var(--font);cursor:pointer;border-radius:var(--r-xs);text-align:start;transition:background .2s ease,color .2s ease}.hln-p .export-opt:hover,.hln-p .export-opt.hovered{background:var(--glass-2);color:var(--text)}.hln-p .stat-card{background:var(--glass-1);border:1px solid var(--bd-1);border-radius:var(--r-md);padding:10px;text-align:center;box-shadow:var(--hl-1),var(--sh-sm);overflow:hidden}.hln-p .stat-number{font-size:24px;font-weight:700;color:var(--text);transition:all .5s ease}.hln-p .stat-number.counting{color:var(--accent);transition:color .3s ease}.hln-p .stat-label{font-size:var(--fs-body);color:var(--muted);margin-top:2px}.hln-p .stat-row{display:flex;gap:8px;margin-bottom:8px}.hln-p .stat-row .stat-card{flex:1}.hln-p .stat-card.done-card .stat-number{color:#3ddc84}.hln-p .stat-card.pending-card .stat-number{color:var(--warn)}.hln-p .stat-section{background:var(--glass-1);border:1px solid var(--bd-1);border-radius:var(--r-md);padding:10px;margin-bottom:8px;overflow:hidden}.hln-p .stat-title{font-size:var(--fs-body);color:var(--text-3);font-weight:600;margin-bottom:8px;transition:color .3s ease}.hln-p .stat-title.highlight{color:var(--accent-2)}.hln-p .stat-bar-row{display:flex;align-items:center;gap:8px;margin:4px 0}.hln-p .stat-bar-label{font-size:var(--fs-note);color:var(--muted);width:50px;flex-shrink:0}.hln-p .stat-bar{flex:1;height:6px;background:var(--glass-2);border-radius:3px;overflow:hidden}.hln-p .stat-bar-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1);width:0}.hln-p .stat-bar-fill.bar-blue{background:var(--accent)}.hln-p .stat-bar-fill.bar-gold{background:var(--gold)}.hln-p .stat-bar-fill.bar-red{background:#ff5c5c}.hln-p .stat-bar-fill.bar-ab{background:var(--accent)}.hln-p .stat-bar-count{font-size:var(--fs-note);color:var(--text-3);width:20px;text-align:end;flex-shrink:0;transition:color .3s ease}.hln-p .legend{opacity:0;max-height:0;overflow:hidden;transition:opacity .4s ease,max-height .4s ease}.hln-p .legend.visible{opacity:1;max-height:200px}.hln-p .legend-item{display:flex;align-items:center;gap:6px;margin-bottom:4px;transition:background .3s ease;padding:2px 4px;border-radius:4px}.hln-p .legend-item.flash{background:#ffffff14}.hln-p .status{background:var(--glass-1);border:1px solid var(--bd-1);color:var(--text-2);border-radius:var(--r-md);padding:8px 12px;font-size:11px;margin-top:8px;min-height:28px;box-shadow:var(--hl-1),var(--sh-sm);transition:all .4s ease}.hln-p .status.ok{background:#3ddc841f;border-color:#3ddc8459;color:#7ce0a0;animation:hlnStatusIn .4s ease}@keyframes hlnStatusIn{0%{opacity:0;transform:translateY(4px)}}.hln-p .footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:0 4px}.hln-p .footer .ver{font-size:9px;color:var(--muted-2)}.hln-p .footer svg{width:16px;height:13px;fill:var(--accent);opacity:.85}.hln-p .cur{position:absolute;width:10px;height:10px;background:#fff;border-radius:50%;box-shadow:0 0 6px #fff6,0 2px 4px #0000004d;pointer-events:none;z-index:100;transform:translate(-6px,-6px);opacity:0;transition:left .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1)}.hln-p .cur.visible{opacity:.85}.hln-p .cur.clicking{animation:hlnCurClick .3s ease}@keyframes hlnCurClick{50%{transform:translate(-6px,-6px) scale(.5);opacity:.4}}.hln-p .ripple{position:absolute;width:24px;height:24px;border:2px solid rgba(255,255,255,.5);border-radius:50%;pointer-events:none;z-index:99;transform:translate(-50%,-50%) scale(0);animation:hlnRipOut .5s ease forwards}@keyframes hlnRipOut{to{transform:translate(-50%,-50%) scale(2);opacity:0}}.hln-p .btn.pulse{animation:hlnBtnPulse .4s ease}@keyframes hlnBtnPulse{50%{transform:scale(.95);filter:brightness(1.2)}}.hln-p .form-el-name{font-size:var(--fs-body);color:var(--text-3);margin-bottom:6px;font-weight:500;transition:color .3s ease}.hln-p .form-el-name.highlight{color:var(--accent-2)}.hln-p .bottom-actions{display:flex;gap:4px;padding:8px 0;border-top:1px solid var(--bd-1);margin-top:8px}.hln-p .bottom-actions .btn{flex:1;font-size:var(--fs-body);padding:7px 10px}.hln-p .author-input{height:28px;background:#ffffff0f;border:1px solid var(--bd-1);border-radius:var(--r-sm);color:var(--text);font:12px var(--font);padding:0 8px;outline:none;flex:1;min-width:0}.hln-p .tags-input{height:28px;background:#ffffff0f;border:1px solid var(--bd-1);border-radius:var(--r-sm);color:var(--text);font:12px var(--font);padding:0 8px;outline:none;width:100%;margin-top:4px}.hln-p .empty-state{text-align:center;color:var(--muted);padding:16px;font-size:13px}.hln-p .empty-state .icon{font-size:28px;margin-bottom:6px;display:block;opacity:.5}.hln-p .notes-list{max-height:220px;overflow-y:auto;overflow-x:hidden}.hln-p .notes-list::-webkit-scrollbar{width:6px}.hln-p .notes-list::-webkit-scrollbar-thumb{background:var(--glass-2);border-radius:3px}.hln-p .reply-count-highlight{animation:countBump .4s ease}@keyframes countBump{0%{transform:scale(1)}50%{transform:scale(1.3);color:var(--accent-2)}to{transform:scale(1)}}.hln-p .pin-indicator{position:absolute;top:4px;left:4px;font-size:10px;opacity:0;transition:opacity .3s ease}.hln-p .pin-indicator.visible{opacity:1}
/*# sourceMappingURL=/cdn/shop/t/6/assets/hiraf-demos-notes.css.map */