.note-calc{width:100%}.note-calc-panel{background:var(--bg-surface-raised);border:1px solid var(--border-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}.note-calc-body{grid-template-columns:minmax(0,1fr) 220px;min-height:min(70dvh,640px);display:grid}.note-calc-main{border-right:1px solid var(--border-soft);flex-direction:column;min-width:0;min-height:0;padding:18px 20px 20px;display:flex}.note-calc-label{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 8px;font-size:12px;font-weight:700;display:block}.note-calc-textarea{border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:var(--surface-solid);width:100%;color:var(--text-primary);resize:vertical;transition:all var(--transition-fast,.15s ease);outline:none;margin:0 0 20px;padding:14px 16px;font-family:inherit;font-size:15px;line-height:1.55}.note-calc-textarea.is-big{height:340px;min-height:280px}.note-calc-textarea.is-small{height:140px;min-height:120px}.note-calc-textarea::placeholder{color:var(--text-muted)}.note-calc-textarea:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--focus-ring)}.note-calc-list-header{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;display:flex}.note-calc-list-heading{margin:0}.note-calc-list-meta{color:var(--text-muted);font-size:12px;font-weight:600}.note-calc-empty{border:1px dashed var(--border-soft);border-radius:var(--radius-md);background:color-mix(in srgb, var(--surface-solid) 70%, transparent);margin:0;padding:28px 12px;font-family:inherit;font-size:13px;font-weight:500;line-height:1.45}.note-calc-list{overscroll-behavior:contain;flex:1;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));align-content:start;gap:6px;min-height:0;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.note-calc-item{background:var(--surface-solid);border:1px solid var(--border-soft);border-radius:var(--radius-sm);min-width:0;transition:background var(--transition-fast), border-color var(--transition-fast);justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;display:flex}.note-calc-item:hover{background:var(--surface-elevated)}.note-calc-header-item{grid-column:1/-1;padding:8px 12px}.note-calc-header-subtotal{font-family:var(--font-mono);color:var(--text-muted);font-size:12px;font-weight:700}.note-calc-item-label{min-width:0;color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;font-weight:600;overflow:hidden}.note-calc-item-value{font-family:var(--font-mono);color:var(--text-secondary);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:13px;font-weight:700}.note-calc-item-value.is-positive{color:var(--accent-green)}.note-calc-item-value.is-negative{color:var(--accent-rose)}.note-calc-item-value.is-empty{color:var(--text-muted);font-weight:600}.note-calc-sidebar{background:color-mix(in srgb, var(--bg-surface-raised) 80%, var(--color-peach) 12%);flex-direction:column;gap:10px;padding:20px 18px;display:flex}.note-calc-total{font-family:var(--font-mono);letter-spacing:-.03em;color:var(--text-primary);font-variant-numeric:tabular-nums;word-break:break-all;margin:0;font-size:clamp(1.75rem,3vw,2.25rem);font-weight:800;line-height:1.1}.note-calc-total.is-positive{color:var(--accent-green)}.note-calc-total.is-negative{color:var(--accent-rose)}.note-calc-sidebar-hint{color:var(--text-muted);margin:0;font-size:12px;line-height:1.45}.note-calc-page{width:min(960px,100%);min-height:0;padding:8px var(--app-gutter) 40px;flex:1;margin:0 auto}.note-calc-page-header{margin-top:12px;margin-bottom:22px}.note-calc-page-header .page-title{margin-bottom:6px;font-size:28px}.note-calc-page-subtitle{max-width:36rem;color:var(--text-secondary);margin:0;font-size:14px;line-height:1.45}.note-calc-input-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.note-calc-input-header .note-calc-label{margin:0}.note-calc-actions{gap:6px;display:flex}.btn-action{text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-sm);background:var(--bg-surface);border:1px solid var(--border-soft);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);padding:4px 10px;font-family:inherit;font-size:10px;font-weight:700}.btn-action:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-focus);color:var(--text-primary)}.btn-action:disabled{opacity:.45;cursor:not-allowed}.note-calc-desktop-actions{gap:6px;display:flex}.note-calc-mobile-menu-wrap{display:none;position:relative}.note-calc-dropdown-menu{z-index:100;background:var(--surface-solid);border:1px solid var(--border-soft);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);flex-direction:column;gap:4px;min-width:140px;margin-top:4px;padding:6px;display:flex;position:absolute;top:100%;right:0}.dropdown-option{text-align:left;width:100%;color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast);background:0 0;border:none;border-radius:4px;padding:8px 12px;font-family:inherit;font-size:12px;font-weight:600;display:block}.dropdown-option:hover:not(:disabled){background:var(--surface-hover)}.dropdown-option:disabled{opacity:.45;cursor:not-allowed}.btn-copy-summary{background:var(--badge-bg);color:var(--badge-text);border-color:#0000}.btn-copy-summary:hover:not(:disabled){background:var(--border-focus);color:var(--on-accent)}.note-calc-header-item{background:color-mix(in srgb, var(--border-focus) 12%, var(--bg-surface-raised));border-left:3px solid var(--border-focus);border-radius:var(--radius-sm);font-family:var(--font-display);grid-column:1/-1;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.note-calc-header-title{color:var(--text-primary);font-size:13px;font-weight:700}.note-calc-header-subtotal{color:var(--text-muted);font-size:12px;font-weight:600}.note-calc-total-section{flex-direction:column;gap:6px;width:100%;display:flex}.note-calc-breakdown-section{border-top:1px solid var(--border-soft);flex-direction:column;gap:8px;width:100%;margin-top:10px;padding-top:16px;display:flex}.note-calc-breakdown-list{flex-direction:column;gap:12px;display:flex}.breakdown-row{flex-direction:column;gap:4px;display:flex}.breakdown-info{justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;display:flex}.breakdown-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;max-width:110px;overflow:hidden}.breakdown-val{color:var(--text-secondary);font-family:var(--font-mono);font-size:11px}.breakdown-bar-track{background:var(--bg-surface);border-radius:3px;height:6px;position:relative;overflow:hidden}.breakdown-bar-fill{background:var(--border-focus);border-radius:3px;height:100%;transition:width .3s}.note-calc-sidebar-tabs{background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);margin-top:10px;padding:2px;display:flex}.note-calc-sidebar-tabs .tab-btn{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:4px;flex:1;padding:6px 12px;font-family:inherit;font-size:11px;font-weight:700}.note-calc-sidebar-tabs .tab-btn:hover{color:var(--text-primary)}.note-calc-sidebar-tabs .tab-btn.is-active{background:var(--surface-solid);color:var(--text-primary);box-shadow:var(--shadow-sm)}.note-calc-history-section{border-top:1px solid var(--border-soft);flex-direction:column;gap:8px;width:100%;margin-top:10px;padding-top:16px;display:flex}.note-calc-history-list{flex-direction:column;gap:8px;max-height:240px;display:flex;overflow-y:auto}.history-row{background:var(--surface-solid);border:1px solid var(--border-soft);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);justify-content:space-between;align-items:center;gap:8px;padding:8px;display:flex}.history-row:hover{background:var(--surface-elevated);border-color:var(--border-focus)}.history-info{flex-direction:column;flex:1;min-width:0;display:flex}.history-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:700;overflow:hidden}.history-date{color:var(--text-muted);font-size:10px}.history-value-container{flex-shrink:0;align-items:center;gap:6px;display:flex}.history-val{font-family:var(--font-mono);color:var(--accent-green);font-size:12px;font-weight:700}.btn-history-delete{color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:4px;padding:4px;font-size:12px;line-height:1}.btn-history-delete:hover{color:var(--accent-rose);background:#e06c751a}.history-row.is-active{background:color-mix(in srgb, var(--border-focus) 8%, var(--surface-solid));border-color:var(--border-focus);border-left:3px solid var(--border-focus)}@media (max-width:800px){.note-calc-body{grid-template-columns:1fr;min-height:0}.note-calc-main{border-right:none;border-bottom:1px solid var(--border-soft);padding:14px 12px}.note-calc-sidebar{flex-direction:column;gap:16px;padding:16px 14px}.note-calc-total{font-size:1.75rem}.note-calc-sidebar-hint{width:100%}}@media (max-width:640px){.note-calc-page{padding:8px 10px 32px}.note-calc-page-header .page-title{font-size:22px}.note-calc-input-header{flex-direction:row;justify-content:space-between;align-items:center;gap:8px}.note-calc-desktop-actions{display:none}.note-calc-mobile-menu-wrap{display:block}.note-calc-actions{flex-wrap:nowrap;gap:6px}.btn-action{min-height:32px;padding:6px 10px;font-size:11px}.note-calc-textarea{padding:12px;font-size:16px}.note-calc-textarea.is-big{height:220px;min-height:180px}.note-calc-list{grid-template-columns:1fr}.breakdown-name{max-width:140px}}
