/* neutralise same-named classes in the pdfeditkaro site.css (.stat .toast .out) - the tool rules below take over */
#ipl .stat{border:0;border-radius:0;padding:0}
#ipl .toast{position:static;left:auto;bottom:auto;transform:none;opacity:1;pointer-events:none;transition:none;z-index:auto;text-align:left;border-radius:0}
#ipl .toast.out{border:0;border-radius:0}
#ipl{--bg: #f3f6fb; --bg-alt: #e8eef8; --ink: #10244a; --ink-soft: #3a4d70; --ink-faint: #6b7d99; --line: #dde5f0; --accent: #0b72f0; --accent-soft: #e6f0ff; --sage: #12805c; --sage-soft: #d3eee3; --cream: #ffffff; --danger: #d62027; --danger-soft: #fdecea; --gold: #9a5b00; --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif; --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", "Courier New", monospace; --radius: 4px; --shadow-soft: 0 2px 12px rgba(16, 36, 74, 0.06); --shadow-hover: 0 8px 28px rgba(16, 36, 74, 0.10);}
#ipl *{box-sizing: border-box; margin: 0; padding: 0;}
#ipl{background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;}
#ipl main,#ipl header,#ipl footer{position: relative; z-index: 2;}
#ipl a{color: var(--ink); text-decoration: none; transition: color .2s;}
#ipl a:hover{color: var(--accent);}
#ipl h1,#ipl h2,#ipl h3,#ipl h4{font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1;}
#ipl h1{font-size: clamp(2.5rem, 6vw, 5rem);}
#ipl h2{font-size: clamp(1.8rem, 3.5vw, 2.8rem);}
#ipl h3{font-size: 1.4rem;}
#ipl h4{font-size: 1.1rem;}
#ipl .container{max-width: 1240px; margin: 0 auto; padding: 0 32px;}
#ipl .site-header{border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px);}
#ipl .header-inner{display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; max-width: 1400px; margin: 0 auto;}
#ipl .logo{font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); display: flex; align-items: baseline; gap: 2px;}
#ipl .logo .dot{color: var(--accent); font-size: 2rem; line-height: 0;}
#ipl .logo .domain{font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); margin-left: 6px; letter-spacing: 0.05em;}
#ipl .nav-desktop{display: flex; gap: 28px; align-items: center;}
#ipl .nav-desktop a,#ipl .nav-desktop .dropdown-trigger{font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); cursor: pointer; padding: 6px 0; border: none; background: none; font-family: inherit;}
#ipl .nav-desktop a:hover,#ipl .nav-desktop .dropdown-trigger:hover{color: var(--accent);}
#ipl .dropdown{position: relative;}
#ipl .dropdown-menu{display: none; position: absolute; top: 100%; right: 0; background: var(--cream); border: 1px solid var(--line); padding: 24px; min-width: 520px; box-shadow: var(--shadow-hover); z-index: 200; grid-template-columns: 1fr 1fr; gap: 20px;}
#ipl .dropdown:hover .dropdown-menu{display: grid;}
#ipl .dropdown-menu h5{font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin-bottom: 10px;}
#ipl .dropdown-menu a{display: block; padding: 5px 0; font-size: 0.9rem; text-transform: none; letter-spacing: 0; color: var(--ink);}
#ipl .menu-toggle{display: none; background: none; border: 1px solid var(--ink); padding: 8px 14px; cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em;}
#ipl .mobile-nav{display: none; background: var(--cream); border-top: 1px solid var(--line); padding: 20px 32px; max-height: 70vh; overflow-y: auto;}
#ipl .mobile-nav.open{display: block;}
#ipl .mobile-nav h5{font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin: 16px 0 8px;}
#ipl .mobile-nav a{display: block; padding: 7px 0; font-size: 0.95rem; border-bottom: 1px solid var(--line);}
#ipl .hero{padding: 80px 0 60px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden;}
#ipl .hero-grid{display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center;}
#ipl .hero-title{font-size: clamp(3rem, 7vw, 6rem); line-height: 0.95;}
#ipl .hero-title .italic{font-style: italic; color: var(--accent);}
#ipl .hero-title .line{display: block;}
#ipl .hero-sub{margin-top: 24px; font-size: 1.15rem; color: var(--ink-soft); max-width: 540px; line-height: 1.55;}
#ipl .hero-meta{display: flex; gap: 32px; margin-top: 36px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);}
#ipl .hero-meta span strong{display: block; font-size: 1.8rem; font-family: var(--font-display); color: var(--ink); font-weight: 500; letter-spacing: -0.02em; text-transform: none; margin-bottom: 2px;}
#ipl .hero-visual{position: relative; aspect-ratio: 1; max-width: 420px; margin-left: auto;}
#ipl .hero-card{position: absolute; background: var(--cream); border: 1px solid var(--line); box-shadow: var(--shadow-soft); padding: 20px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);}
#ipl .hero-card.c1{top: 0; left: 0; width: 55%; aspect-ratio: 3/4; transform: rotate(-4deg); background: var(--accent); color: var(--cream);}
#ipl .hero-card.c2{top: 15%; right: 0; width: 55%; aspect-ratio: 3/4; transform: rotate(3deg); background: var(--sage); color: var(--cream);}
#ipl .hero-card.c3{bottom: 0; left: 20%; width: 55%; aspect-ratio: 3/4; transform: rotate(-2deg); background: var(--bg-alt);}
#ipl .hero-card .big{font-family: var(--font-display); font-size: 2rem; text-transform: none; letter-spacing: -0.02em; margin-top: 10px; color: inherit;}
#ipl .section-intro{padding: 60px 0 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-bottom: 1px solid var(--line);}
#ipl .section-intro-label{font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px;}
#ipl .section-intro h2{max-width: 720px;}
#ipl .section-intro p{max-width: 440px; color: var(--ink-soft);}
#ipl .tool-category{padding: 60px 0; border-bottom: 1px solid var(--line);}
#ipl .category-header{display: flex; align-items: baseline; gap: 20px; margin-bottom: 36px;}
#ipl .category-number{font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); letter-spacing: 0.1em;}
#ipl .category-title{font-family: var(--font-display); font-size: 2rem; font-weight: 400;}
#ipl .category-line{flex: 1; height: 1px; background: var(--line);}
#ipl .tool-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line);}
#ipl .tool-card{background: var(--cream); padding: 28px 24px; display: block; transition: background .25s, transform .25s; position: relative; min-height: 180px;}
#ipl .tool-card:hover{background: var(--bg-alt);}
#ipl .tool-card .icon{width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--cream); font-family: var(--font-display); font-size: 1.3rem; font-style: italic; margin-bottom: 18px; border-radius: 50%;}
#ipl .tool-card h3{font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 8px; color: var(--ink);}
#ipl .tool-card p{font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5;}
#ipl .tool-card .arrow{position: absolute; bottom: 20px; right: 20px; font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent); opacity: 0; transform: translateX(-8px); transition: .3s;}
#ipl .tool-card:hover .arrow{opacity: 1; transform: translateX(0);}
#ipl .tool-grid.cat-organize .tool-card .icon{background: var(--accent);}
#ipl .tool-grid.cat-convert .tool-card .icon{background: var(--sage);}
#ipl .tool-grid.cat-edit .tool-card .icon{background: var(--gold);}
#ipl .tool-grid.cat-security .tool-card .icon{background: #3a4a5a;}
#ipl .tool-grid.cat-image .tool-card .icon{background: var(--accent);}
#ipl .tool-grid.cat-calc .tool-card .icon{background: var(--sage);}
#ipl .tool-grid.cat-misc .tool-card .icon{background: var(--gold);}
#ipl .tool-page{padding: 60px 0 80px;}
#ipl .tool-page-header{max-width: 800px; margin-bottom: 50px;}
#ipl .breadcrumb{font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 24px;}
#ipl .breadcrumb a{color: var(--ink-faint);}
#ipl .breadcrumb a:hover{color: var(--accent);}
#ipl .tool-title{font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 20px;}
#ipl .tool-subtitle{font-size: 1.1rem; color: var(--ink-soft); line-height: 1.6;}
#ipl .tool-workspace{background: var(--cream); border: 1px solid var(--line); padding: 40px; margin-bottom: 40px; box-shadow: var(--shadow-soft);}
#ipl .dropzone{border: 2px dashed var(--line); padding: 60px 30px; text-align: center; cursor: pointer; transition: all .25s; background: var(--bg);}
#ipl .dropzone:hover,#ipl .dropzone.dragover{border-color: var(--accent); background: var(--accent-soft);}
#ipl .dropzone .drop-icon{width: 72px; height: 72px; margin: 0 auto 20px; border: 2px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2rem; font-style: italic;}
#ipl .dropzone h3{font-size: 1.5rem; margin-bottom: 8px;}
#ipl .dropzone p{color: var(--ink-soft); font-size: 0.95rem;}
#ipl .dropzone .small{display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);}
#ipl .btn{display: inline-block; background: var(--ink); color: var(--cream); padding: 14px 32px; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase; border: none; cursor: pointer; transition: all .2s; font-weight: 500;}
#ipl .btn:hover{background: var(--accent); color: var(--cream); transform: translateY(-1px);}
#ipl .btn:disabled{opacity: 0.4; cursor: not-allowed; transform: none;}
#ipl .btn.secondary{background: transparent; color: var(--ink); border: 1px solid var(--ink);}
#ipl .btn.secondary:hover{background: var(--ink); color: var(--cream);}
#ipl .btn.accent{background: var(--accent); color: var(--cream);}
#ipl .btn.accent:hover{background: var(--ink);}
#ipl .file-list{margin-top: 20px; display: flex; flex-direction: column; gap: 8px;}
#ipl .file-item{display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg); border: 1px solid var(--line); font-size: 0.9rem;}
#ipl .file-item .name{font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 12px;}
#ipl .file-item .size{font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); margin-right: 12px;}
#ipl .file-item .remove{background: none; border: none; color: var(--accent); cursor: pointer; font-size: 1.2rem; padding: 0 8px; font-family: var(--font-mono);}
#ipl .form-row{display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;}
#ipl .form-group{flex: 1; min-width: 200px;}
#ipl .form-group label{display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px;}
#ipl .form-group input,#ipl .form-group select,#ipl .form-group textarea{width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); transition: border-color .2s;}
#ipl .form-group input:focus,#ipl .form-group select:focus,#ipl .form-group textarea:focus{outline: none; border-color: var(--accent);}
#ipl .action-bar{display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 16px;}
#ipl .result-box{background: var(--sage-soft); border: 1px solid var(--sage); padding: 24px; margin-top: 20px; display: none;}
#ipl .result-box.show{display: block;}
#ipl .result-box h4{font-size: 1.2rem; margin-bottom: 10px; color: var(--ink);}
#ipl .result-box p{margin-bottom: 14px; color: var(--ink-soft); font-size: 0.95rem;}
#ipl .status-msg{padding: 12px 16px; background: var(--accent-soft); border-left: 3px solid var(--accent); font-size: 0.9rem; margin: 16px 0; font-family: var(--font-mono); font-size: 0.82rem;}
#ipl .tool-info{display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px;}
#ipl .tool-info h3{margin-bottom: 16px; font-size: 1.6rem;}
#ipl .tool-info p{color: var(--ink-soft); margin-bottom: 12px;}
#ipl .tool-info ul{list-style: none; padding: 0;}
#ipl .tool-info li{padding: 8px 0; padding-left: 24px; position: relative; color: var(--ink-soft); font-size: 0.95rem;}
#ipl .tool-info li::before{content: "→"; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono);}
#ipl .legal-page{padding: 80px 0;}
#ipl .legal-container{max-width: 780px; margin: 0 auto;}
#ipl .legal-container h1{margin-bottom: 16px;}
#ipl .legal-container .updated{font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); margin-bottom: 40px; letter-spacing: 0.1em;}
#ipl .legal-container h2{font-size: 1.6rem; margin: 40px 0 12px;}
#ipl .legal-container h3{font-size: 1.2rem; margin: 24px 0 10px;}
#ipl .legal-container p{margin-bottom: 14px; color: var(--ink-soft); line-height: 1.75;}
#ipl .legal-container ul{margin: 14px 0 14px 24px; color: var(--ink-soft);}
#ipl .legal-container li{margin-bottom: 6px; line-height: 1.7;}
#ipl .legal-container a{color: var(--accent); text-decoration: underline; text-underline-offset: 3px;}
#ipl .faq-item{border-bottom: 1px solid var(--line); padding: 20px 0;}
#ipl .faq-q{font-family: var(--font-display); font-size: 1.25rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center;}
#ipl .faq-q::after{content: "+"; color: var(--accent); font-family: var(--font-mono); font-size: 1.5rem; transition: transform .3s;}
#ipl .faq-item.open .faq-q::after{transform: rotate(45deg);}
#ipl .faq-a{max-height: 0; overflow: hidden; transition: max-height .3s; color: var(--ink-soft);}
#ipl .faq-item.open .faq-a{max-height: 500px; margin-top: 14px;}
#ipl .site-footer{background: var(--ink); color: var(--cream); padding: 80px 0 30px; margin-top: 100px;}
#ipl .footer-inner{max-width: 1240px; margin: 0 auto; padding: 0 32px;}
#ipl .footer-top{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px;}
#ipl .footer-brand .logo{color: var(--cream);}
#ipl .footer-brand .logo .dot{color: var(--accent);}
#ipl .footer-tagline{margin-top: 20px; color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; line-height: 1.6; max-width: 320px;}
#ipl .footer-col h5{font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px;}
#ipl .footer-col ul{list-style: none; padding: 0;}
#ipl .footer-col li{margin-bottom: 10px;}
#ipl .footer-col a{color: rgba(255, 255, 255, 0.75); font-size: 0.9rem;}
#ipl .footer-col a:hover{color: var(--accent);}
#ipl .footer-bottom{border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); font-family: var(--font-mono); letter-spacing: 0.05em;}
#ipl .calc-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;}
#ipl .calc-output{background: var(--ink); color: var(--cream); padding: 36px; min-height: 300px; position: relative;}
#ipl .calc-output .label{font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 8px;}
#ipl .calc-output .value{font-family: var(--font-display); font-size: 3.5rem; line-height: 1.1; color: var(--accent-soft); margin-bottom: 24px; letter-spacing: -0.03em;}
#ipl .calc-output .row{display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.92rem;}
#ipl .calc-output .row span:last-child{color: var(--accent-soft); font-family: var(--font-mono);}
#ipl .calc-pad{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line);}
#ipl .calc-pad button{padding: 22px; background: var(--cream); border: none; font-family: var(--font-display); font-size: 1.4rem; cursor: pointer; transition: background .15s;}
#ipl .calc-pad button:hover{background: var(--bg-alt);}
#ipl .calc-pad .op{background: var(--bg-alt); color: var(--accent);}
#ipl .calc-pad .eq{background: var(--accent); color: var(--cream); grid-row: span 2;}
#ipl .calc-pad .eq:hover{background: var(--ink);}
#ipl .typing-area{background: var(--bg); padding: 28px; min-height: 160px; font-family: var(--font-mono); font-size: 1.1rem; line-height: 1.8; border: 1px solid var(--line); margin-bottom: 20px; user-select: none;}
#ipl .typing-area .word{margin-right: 6px;}
#ipl .typing-area .char.correct{color: var(--sage);}
#ipl .typing-area .char.wrong{color: var(--accent); background: var(--accent-soft);}
#ipl .typing-area .char.current{background: var(--ink); color: var(--cream);}
#ipl .typing-input{width: 100%; padding: 14px; font-family: var(--font-mono); font-size: 1rem; background: var(--cream); border: 1px solid var(--line);}
#ipl .typing-stats{display: flex; gap: 28px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 0.85rem;}
#ipl .typing-stats strong{color: var(--accent); font-size: 1.2rem;}
@media (max-width: 900px){#ipl .hero-grid{grid-template-columns: 1fr;}
#ipl .hero-visual{max-width: 320px; margin: 40px auto 0;}
#ipl .footer-top{grid-template-columns: 1fr 1fr;}
#ipl .calc-grid{grid-template-columns: 1fr;}
#ipl .tool-info{grid-template-columns: 1fr; gap: 24px;}}
@media (max-width: 720px){#ipl .container{padding: 0 20px;}
#ipl .header-inner{padding: 14px 20px;}
#ipl .nav-desktop{display: none;}
#ipl .menu-toggle{display: inline-block;}
#ipl .hero{padding: 50px 0 40px;}
#ipl .tool-workspace{padding: 24px 20px;}
#ipl .footer-top{grid-template-columns: 1fr; gap: 32px;}
#ipl .footer-bottom{flex-direction: column; text-align: center;}
#ipl .dropzone{padding: 40px 20px;}}
@keyframes fadeUp{from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}
#ipl .fadeUp{animation: fadeUp .8s ease-out backwards;}
#ipl .fadeUp:nth-child(2){animation-delay: .1s;}
#ipl .fadeUp:nth-child(3){animation-delay: .2s;}
#ipl .fadeUp:nth-child(4){animation-delay: .3s;}
#ipl .num-shell{display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start;}
@media (max-width: 1024px){#ipl .num-shell{grid-template-columns: 1fr;}}
#ipl .dropzone.compact{padding: 32px 24px;}
#ipl .dropzone.compact h3{font-size: 1.2rem;}
#ipl .dropzone .drop-icon-sm{width: 52px; height: 52px; font-size: 1.4rem; margin: 0 auto 12px; border-width: 1.5px;}
#ipl .current-file{margin-top: 20px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--cream); border: 1px solid var(--line);}
#ipl .current-file .thumb{width: 42px; height: 54px; background: var(--bg); border: 1px solid var(--line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;}
#ipl .current-file .thumb canvas{max-width: 100%; max-height: 100%;}
#ipl .current-file .loader{width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite;}
@keyframes spin{to { transform: rotate(360deg); }}
#ipl .current-file .info{flex: 1; min-width: 0;}
#ipl .current-file .name{font-weight: 500; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#ipl .current-file .meta{font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.04em; margin-top: 2px;}
#ipl .current-file .swap{background: transparent; border: 1px solid var(--line); padding: 8px 14px; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);}
#ipl .current-file .swap:hover{background: var(--ink); color: var(--cream); border-color: var(--ink);}
#ipl .pw-prompt{padding: 14px 16px; background: var(--bg-alt); border: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px;}
#ipl .pw-prompt label{font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase;}
#ipl .pw-prompt input{flex: 1; min-width: 150px; padding: 8px 10px; font-family: var(--font-mono); font-size: 0.85rem; background: var(--cream); border: 1px solid var(--line);}
#ipl .pw-prompt button{padding: 8px 14px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: var(--cream); border: none; cursor: pointer;}
#ipl .options-panel{margin-top: 24px; padding: 22px; background: var(--bg-alt); border: 1px solid var(--line); display: none;}
#ipl .options-panel.show{display: block;}
#ipl .opt-section{margin-bottom: 20px;}
#ipl .opt-section:last-child{margin-bottom: 0;}
#ipl .opt-section-title{font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px;}
#ipl .opt-row{display: grid; gap: 10px;}
#ipl .opt-row.cols-2{grid-template-columns: 1fr 1fr;}
#ipl .opt-row.cols-3{grid-template-columns: 1fr 1fr 1fr;}
#ipl .opt-row.cols-4{grid-template-columns: repeat(4, 1fr);}
@media (max-width: 720px){#ipl .opt-row.cols-3,#ipl .opt-row.cols-4{grid-template-columns: 1fr 1fr;}}
#ipl .opt-group label.block{display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;}
#ipl .opt-group input[type="text"],#ipl .opt-group input[type="number"],#ipl .opt-group select{width: 100%; padding: 9px 10px; font-family: var(--font-body); font-size: 0.9rem; background: var(--cream); border: 1px solid var(--line);}
#ipl .opt-group input:focus,#ipl .opt-group select:focus{outline: none; border-color: var(--accent);}
#ipl .opt-group input[type="color"]{width: 100%; height: 38px; padding: 2px; border: 1px solid var(--line); background: var(--cream); cursor: pointer;}
#ipl .pos-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; background: var(--cream); border: 1px solid var(--line); aspect-ratio: 3 / 2; max-width: 200px;}
#ipl .pos-btn{background: var(--bg); border: 1px solid transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); transition: all .15s; letter-spacing: 0.04em;}
#ipl .pos-btn:hover{background: var(--bg-alt); color: var(--ink);}
#ipl .pos-btn.active{background: var(--accent); color: #fff; border-color: var(--accent);}
#ipl .toggle-chk{display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.88rem; cursor: pointer; padding: 8px 12px; background: var(--cream); border: 1px solid var(--line); color: var(--ink);}
#ipl .toggle-chk input{accent-color: var(--accent);}
#ipl .toggle-chk.active{background: var(--accent); color: #fff; border-color: var(--accent);}
#ipl .preview-head{margin-top: 30px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;}
#ipl .preview-head h3{font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; letter-spacing: -0.01em;}
#ipl .preview-head .summary{font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.05em;}
#ipl .hero-preview{background: var(--bg-alt); border: 1px solid var(--line); padding: 24px; display: flex; justify-content: center; align-items: flex-start; margin-bottom: 16px; min-height: 320px; max-height: 540px; overflow: auto;}
#ipl .hero-wrap{position: relative; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center;}
#ipl .hero-wrap canvas{display: block; max-width: 100%; height: auto;}
#ipl .hero-wrap .num-overlay{position: absolute; pointer-events: none; padding: 2px 8px; font-family: Helvetica, Arial, sans-serif; white-space: nowrap; line-height: 1; transform-origin: center;}
#ipl .hero-wrap .num-overlay.bg{background: rgba(255,255,255,0.85); border: 1px solid rgba(0,0,0,0.08);}
#ipl .hero-empty{color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.05em; text-align: center; padding: 60px 20px;}
#ipl .thumb-strip{display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; padding: 12px; background: var(--bg-alt); border: 1px solid var(--line);}
#ipl .thumb-chip{position: relative; aspect-ratio: 1 / 1.3; background: var(--cream); border: 2px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s;}
#ipl .thumb-chip:hover{border-color: var(--ink-soft); transform: translateY(-2px);}
#ipl .thumb-chip canvas{max-width: 100%; max-height: 100%;}
#ipl .thumb-chip .num-pill{position: absolute; top: 4px; left: 5px; font-family: var(--font-mono); font-size: 0.68rem; background: rgba(26,26,26,0.85); color: #fff; padding: 1px 6px; border-radius: 2px;}
#ipl .thumb-chip.skipped{opacity: 0.4;}
#ipl .thumb-chip.skipped::before{content: 'skip'; position: absolute; bottom: 4px; left: 5px; font-family: var(--font-mono); font-size: 0.6rem; background: var(--ink-faint); color: #fff; padding: 1px 5px; letter-spacing: 0.04em;}
#ipl .thumb-chip .num-overlay{position: absolute; pointer-events: none; font-family: Helvetica, Arial, sans-serif; white-space: nowrap; line-height: 1; padding: 1px 3px;}
#ipl .thumb-chip .num-overlay.bg{background: rgba(255,255,255,0.85); border: 1px solid rgba(0,0,0,0.08);}
#ipl .side-card{background: var(--cream); border: 1px solid var(--line); padding: 20px; position: sticky; top: 100px;}
#ipl .side-card h3{font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin-bottom: 16px;}
#ipl .side-card .form-group{margin-bottom: 14px;}
#ipl .side-card label.block{display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);}
#ipl .side-card input[type="text"]{width: 100%; padding: 9px 10px; font-family: var(--font-body); font-size: 0.9rem; background: var(--bg); border: 1px solid var(--line);}
#ipl .side-stats{padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0;}
#ipl .stat{font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.05em;}
#ipl .stat strong{display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1;}
#ipl .stat.num strong{color: var(--accent);}
#ipl .primary-btn,#ipl .secondary-btn{width: 100%; padding: 16px; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase; border: none; cursor: pointer; transition: all .2s; font-weight: 500;}
#ipl .primary-btn{background: var(--accent); color: #fff;}
#ipl .primary-btn:hover:not(:disabled){background: var(--ink);}
#ipl .primary-btn:disabled{background: var(--line); color: var(--ink-faint); cursor: not-allowed;}
#ipl .secondary-btn{background: transparent; color: var(--ink); border: 1px solid var(--ink); margin-top: 10px;}
#ipl .secondary-btn:hover:not(:disabled){background: var(--ink); color: var(--cream);}
#ipl .secondary-btn:disabled{opacity: 0.4; cursor: not-allowed;}
#ipl .progress-wrap{margin-top: 14px; display: none;}
#ipl .progress-wrap.show{display: block;}
#ipl .progress-bar{height: 6px; background: var(--bg-alt); overflow: hidden; border-radius: 3px;}
#ipl .progress-bar-fill{height: 100%; background: var(--accent); transition: width .2s; width: 0;}
#ipl .progress-text{font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.05em; margin-top: 6px; text-align: center;}
#ipl .result-panel{display: none; padding: 20px; background: var(--sage-soft); border: 1px solid var(--sage); margin-top: 14px;}
#ipl .result-panel.show{display: block;}
#ipl .result-panel h4{font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 6px;}
#ipl .result-panel p{font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 12px;}
#ipl .result-actions{display: flex; gap: 8px; flex-wrap: wrap;}
#ipl .result-actions button{padding: 10px 14px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: var(--cream); border: none; cursor: pointer;}
#ipl .result-actions .secondary{background: transparent; color: var(--ink); border: 1px solid var(--ink);}
#ipl .full-preview-modal{position: fixed; inset: 0; background: rgba(20, 18, 14, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1100; padding: 24px; animation: fade .2s ease-out;}
#ipl .full-preview-modal.show{display: flex;}
@keyframes fade{from { opacity: 0; } to { opacity: 1; }}
#ipl .preview-shell{background: var(--cream); width: 100%; max-width: 1100px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,0.4); border: 1px solid var(--line); overflow: hidden;}
#ipl .preview-header{padding: 16px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; flex-wrap: wrap;}
#ipl .preview-title{font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; flex: 1; min-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#ipl .preview-meta{font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase;}
#ipl .preview-close{width: 36px; height: 36px; background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: all .15s; line-height: 1;}
#ipl .preview-close:hover{background: var(--ink); color: var(--cream); border-color: var(--ink);}
#ipl .preview-stage{flex: 1; overflow: auto; background: var(--bg); padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 20px;}
#ipl .preview-page-wrap{background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.18); position: relative; max-width: 100%;}
#ipl .preview-page-wrap canvas{display: block; max-width: 100%; height: auto;}
#ipl .preview-page-label{position: absolute; top: 10px; left: 10px; font-family: var(--font-mono); font-size: 0.7rem; background: rgba(16, 36, 74, 0.75); color: var(--cream); padding: 3px 8px; border-radius: 2px; letter-spacing: 0.05em;}
#ipl .preview-footer{padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
#ipl .zoom-group{display: flex; gap: 2px; align-items: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.05em; margin-right: auto;}
#ipl .zoom-group button{width: 32px; height: 32px; background: transparent; border: 1px solid var(--line); cursor: pointer; color: var(--ink); font-family: var(--font-mono); font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all .15s;}
#ipl .zoom-group button:hover{background: var(--ink); color: var(--cream);}
#ipl .zoom-level{min-width: 48px; text-align: center;}
#ipl .dl-btn{padding: 12px 22px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; background: var(--accent); color: #fff; border: none; cursor: pointer;}
#ipl .dl-btn:hover{background: var(--ink);}
#ipl .preview-empty{padding: 60px 20px; text-align: center; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.05em;}
#ipl .toast-host{position: fixed; bottom: 24px; right: 24px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; pointer-events: none;}
#ipl .toast{background: var(--ink); color: var(--cream); padding: 12px 18px; font-family: var(--font-mono); font-size: 0.8rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2); max-width: 340px; animation: toastIn .3s ease-out; pointer-events: auto;}
#ipl .toast.error{background: var(--danger);}
#ipl .toast.success{background: var(--sage);}
@keyframes toastIn{from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); }}
#ipl .toast.out{animation: toastOut .25s ease-in forwards;}
@keyframes toastOut{to { opacity: 0; transform: translateX(10px); }}
#ipl .privacy-bar{display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--sage-soft); border-left: 3px solid var(--sage); font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink); letter-spacing: 0.03em; margin-bottom: 20px;}
#ipl .privacy-bar svg{width: 16px; height: 16px; flex-shrink: 0; stroke: var(--sage); stroke-width: 2; fill: none;}
#ipl .tips-row{display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 40px;}
#ipl .tip-card{padding: 24px; background: var(--cream); border: 1px solid var(--line);}
#ipl .tip-card .tip-num{font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 10px;}
#ipl .tip-card h4{font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 8px;}
#ipl .tip-card p{font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55;}
@media (max-width: 720px){#ipl .side-card{position: static;}
#ipl .full-preview-modal{padding: 0;}
#ipl .preview-shell{max-height: 100vh; height: 100vh; border: none;}}
#ipl{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}

#ipl .preview-header > div:first-child{flex:1;min-width:0}
#ipl .preview-close{margin-left:auto;flex:none}
#ipl .preview-tip{margin-left:14px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase}
#ipl .page-menu{position:fixed;z-index:1300;min-width:210px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(16,36,74,.22);padding:4px}
#ipl .page-menu button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:10px 14px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;color:var(--danger)}
#ipl .page-menu button:hover,#ipl .page-menu button:focus{background:var(--danger-soft);outline:none}
@media (max-width:720px){#ipl .preview-tip{display:none!important}}

#ipl .picked-tag{position:absolute;top:10px;right:10px;z-index:2;background:var(--sage);color:#fff;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;padding:4px 12px;border-radius:2px;box-shadow:0 2px 8px rgba(18,128,92,.35)}
#ipl .preview-page-wrap{position:relative}
#ipl .page-menu{min-width:230px}
#ipl .page-menu button{color:var(--ink);padding:9px 14px}
#ipl .page-menu button:hover,#ipl .page-menu button:focus{background:var(--accent-soft);color:var(--accent)}
#ipl .page-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
#ipl .view-all-btn{background:var(--cream);border:1px solid var(--line);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;cursor:pointer;color:var(--ink)}
#ipl .view-all-btn:hover{border-color:var(--accent);color:var(--accent)}
#ipl .chk-r{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink);cursor:pointer}
#ipl .chk-r input{width:auto;margin:0}

#ipl .head-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#ipl .picked-tag.off{background:var(--ink-faint);box-shadow:0 2px 8px rgba(16,36,74,.2)}
#ipl .thumb-chip.skipped{opacity:1}
#ipl .thumb-chip.skipped::before{content:'no number'}
#ipl .thumb-chip{cursor:pointer}
#ipl .thumb-chip.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#ipl .hero-cap{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase}
#ipl .hero-cap button{width:30px;height:30px;border:1px solid var(--line);background:var(--cream);cursor:pointer;font-size:1.1rem;line-height:1;color:var(--ink)}
#ipl .hero-cap button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
#ipl .hero-cap button:disabled{opacity:.4;cursor:default}
#ipl .hero-cap span{min-width:200px;text-align:center}
#ipl #numToggle{display:inline-flex}
#ipl .lbl-note{margin-top:6px;font-size:.78rem;color:var(--danger)}
#ipl .hero-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
#ipl .hero-col{flex:1;min-width:0}
#ipl .hero-col .hero-preview{margin-bottom:0;max-height:max(480px,88vh);justify-content:flex-start}
#ipl .hero-wrap{margin:0 auto;flex:none}
#ipl .thumb-strip{max-height:560px;overflow:auto}
#ipl .nudge{width:236px;flex:none;background:var(--cream);border:1px solid var(--line);padding:16px;position:sticky;top:90px;text-align:center}
#ipl .nudge-title{font-weight:600;font-size:.9rem;color:var(--ink);text-align:left;margin-bottom:8px}
#ipl .nudge-pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:2px;justify-content:center;margin:6px 0 12px}
#ipl .nudge-btn{border:0;background:var(--accent);cursor:pointer;padding:0;touch-action:none;transition:transform .08s,background .15s}
#ipl .nudge-btn:hover{background:var(--accent-dark,#085bc4)}
#ipl .nudge-btn:active{transform:scale(.9)}
#ipl .nudge-btn.up{grid-area:1/2;clip-path:polygon(50% 18%,86% 78%,14% 78%)}
#ipl .nudge-btn.left{grid-area:2/1;clip-path:polygon(18% 50%,78% 14%,78% 86%)}
#ipl .nudge-btn.right{grid-area:2/3;clip-path:polygon(82% 50%,22% 14%,22% 86%)}
#ipl .nudge-btn.down{grid-area:3/2;clip-path:polygon(50% 82%,86% 22%,14% 22%)}
#ipl .nudge-ok{grid-area:2/2;border-radius:50%;border:4px solid var(--accent-soft);background:var(--accent);color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;padding:0}
#ipl .nudge-ok:hover{background:var(--accent-dark,#085bc4)}
#ipl .nudge-help{font-size:.82rem;line-height:1.45;color:var(--ink-soft);text-align:left;margin:0 0 10px}
#ipl .nudge-note{font-size:.74rem;color:var(--ink-faint);margin:10px 0 0}
#ipl .nudge-val{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);text-align:left;margin-bottom:10px}
#ipl .nudge-zoom{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
#ipl .nudge-zoom span{flex:1;text-align:left}
#ipl .nudge-zoom button{width:28px;height:28px;border:1px solid var(--line);background:var(--cream);cursor:pointer;font-size:1rem;line-height:1;color:var(--ink)}
#ipl .nudge-zoom button:hover{border-color:var(--accent);color:var(--accent)}
#ipl .nudge-zoom b{min-width:42px;text-align:center;font-weight:500}
@media (max-width:860px){#ipl .hero-row{flex-direction:column}#ipl .hero-col{width:100%}#ipl .nudge{width:100%;position:static}}
#ipl .chip-eye{position:absolute;top:4px;right:5px;z-index:3;width:26px;height:26px;border-radius:50%;border:0;padding:0;background:rgba(16,36,74,.88);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s}
#ipl .chip-eye svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#ipl .thumb-chip:hover .chip-eye,#ipl .chip-eye:focus{opacity:1}
#ipl .chip-eye:hover{background:var(--accent)}
@media (hover:none){#ipl .chip-eye{opacity:1}}

/* ---- Add label page ---- */
#ipl .lbl-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
#ipl .lbl-tabs{display:flex;flex-wrap:wrap;gap:6px}
#ipl .lbl-tab{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:92px;max-width:150px;padding:7px 11px;background:var(--cream);border:1px solid var(--line);cursor:pointer;font-family:var(--font-body);text-align:left;color:var(--ink)}
#ipl .lbl-tab b{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
#ipl .lbl-tab span{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#ipl .lbl-tab.empty span{color:var(--ink-faint);font-style:italic}
#ipl .lbl-tab:hover{border-color:var(--accent)}
#ipl .lbl-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
#ipl .lbl-tab.active.empty span{color:rgba(255,255,255,.75)}
#ipl .lbl-tab.bad{border-color:#c5543b;box-shadow:inset 0 -3px 0 #c5543b}
#ipl .lbl-acts{display:flex;flex-wrap:wrap;gap:6px}
#ipl .mini-btn{padding:7px 12px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;background:var(--cream);border:1px solid var(--line);color:var(--ink);cursor:pointer}
#ipl .mini-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
#ipl .mini-btn:disabled{opacity:.45;cursor:not-allowed}
#ipl .mini-btn.danger:hover:not(:disabled){border-color:#c5543b;color:#c5543b}
#ipl .lbl-note2{margin:10px 0 0;font-size:.8rem;color:var(--ink-soft)}
#ipl .qrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
#ipl .qlab{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-right:2px;min-width:68px}
#ipl .qchip{padding:5px 10px;font-size:.8rem;background:var(--bg);border:1px solid var(--line);color:var(--ink);cursor:pointer;font-family:var(--font-body)}
#ipl .qchip.var{font-family:var(--font-mono);font-size:.74rem}
#ipl .qchip:hover{border-color:var(--accent);color:var(--accent)}
#ipl .pos-grid.pos9{aspect-ratio:1/1;max-width:168px}
#ipl .rng{display:flex;gap:8px;align-items:center}
#ipl .rng input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:38px;padding:0;border:0;background:none}
#ipl .rng input[type=number]{width:78px !important;flex:none}
#ipl .opt-group input:disabled,#ipl .opt-group select:disabled{opacity:.45;cursor:not-allowed}
#ipl .lbl-box{touch-action:none}
#ipl .hero-wrap .lbl-box{cursor:move}
#ipl .hero-wrap .lbl-box.sel{outline:1.5px dashed var(--accent);outline-offset:2px}
#ipl .hero-wrap .lbl-box:hover:not(.sel){outline:1px dashed var(--ink-faint);outline-offset:2px}
#ipl .thumb-chip.skipped::before{content:'no label'}
#ipl .nudge-step{display:flex;align-items:center;gap:8px;justify-content:center;margin:2px 0 8px}
#ipl .nudge-step label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
#ipl .nudge-step select{padding:5px 8px;font-size:.8rem;background:var(--cream);border:1px solid var(--line)}
#ipl .opt-row.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){
  #ipl .opt-row.cols-4{grid-template-columns:1fr 1fr}
  #ipl .lbl-tab{min-width:80px}
  #ipl .qlab{min-width:0;width:100%}
}
@media (max-width:480px){
  #ipl .opt-row.cols-4,#ipl .opt-row.cols-2,#ipl .opt-row.cols-3{grid-template-columns:1fr}
}