/* 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 .rotate-shell{display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start;}
@media (max-width: 1024px){#ipl .rotate-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 .page-toolbar{margin-top: 24px; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--bg-alt); border: 1px solid var(--line);}
#ipl .page-toolbar-row{display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
#ipl .page-toolbar label.lbl{font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); flex-shrink: 0;}
#ipl .page-toolbar input[type="text"]{flex: 1; min-width: 160px; padding: 8px 12px; font-family: var(--font-mono); font-size: 0.85rem; background: var(--cream); border: 1px solid var(--line);}
#ipl .page-toolbar input[type="text"]:focus{outline: none; border-color: var(--accent);}
#ipl .bulk-btn{background: transparent; border: 1px solid var(--line); padding: 8px 14px; cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); transition: all .15s; display: inline-flex; align-items: center; gap: 6px;}
#ipl .bulk-btn:hover{background: var(--accent); color: #fff; border-color: var(--accent);}
#ipl .bulk-btn:disabled{opacity: 0.3; cursor: not-allowed;}
#ipl .bulk-btn.reset{color: var(--ink-faint);}
#ipl .bulk-btn.reset:hover{background: var(--ink-faint); color: #fff; border-color: var(--ink-faint);}
#ipl .bulk-btn .icon{font-size: 1rem; line-height: 1;}
#ipl .quick-btn{background: transparent; border: 1px solid var(--line); padding: 7px 12px; cursor: pointer; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); transition: all .15s;}
#ipl .quick-btn:hover{background: var(--ink); color: var(--cream); border-color: var(--ink);}
#ipl .quick-btn.primary{color: var(--accent); border-color: var(--accent-soft);}
#ipl .quick-btn.primary:hover{background: var(--accent); color: #fff; border-color: var(--accent);}
#ipl .select-toggle{display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; padding: 6px 10px; border: 1px solid var(--line); background: var(--cream);}
#ipl .select-toggle input{accent-color: var(--accent);}
#ipl .select-toggle.active{background: var(--accent); color: #fff; border-color: var(--accent);}
#ipl .toolbar-section{border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 2px;}
#ipl .grid-head{margin-top: 30px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px;}
#ipl .grid-head h3{font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; letter-spacing: -0.01em;}
#ipl .grid-head .summary{font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.03em;}
#ipl .grid-head .summary .sel-count{color: var(--accent); font-weight: 600;}
#ipl .grid-head .summary .rot-count{color: var(--accent); font-weight: 600;}
#ipl .page-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 16px; background: var(--bg-alt); border: 1px solid var(--line);}
#ipl .page-chip-r{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: border-color .15s, background .15s, transform .15s;}
#ipl .page-chip-r:hover{border-color: var(--ink-soft); transform: translateY(-2px);}
#ipl .page-chip-r .rot-stage{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform .4s cubic-bezier(0.4, 0.0, 0.2, 1);}
#ipl .page-chip-r .rot-stage canvas{max-width: 92%; max-height: 92%;}
#ipl .page-chip-r .page-num{position: absolute; top: 4px; left: 5px; font-family: var(--font-mono); font-size: 0.72rem; background: rgba(26,26,26,0.85); color: var(--cream); padding: 2px 7px; border-radius: 2px; letter-spacing: 0.04em; z-index: 2;}
#ipl .page-chip-r .rot-badge{position: absolute; bottom: 5px; right: 5px; font-family: var(--font-mono); font-size: 0.65rem; padding: 2px 6px; border-radius: 2px; letter-spacing: 0.04em; color: var(--ink-faint); background: transparent; border: 1px solid var(--line); z-index: 2;}
#ipl .page-chip-r.rotated .rot-badge{background: var(--accent); color: #fff; border-color: var(--accent);}
#ipl .page-chip-r.selected{border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft);}
#ipl .page-chip-r .sel-badge{position: absolute; bottom: 5px; left: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: none; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; z-index: 2;}
#ipl .page-chip-r.selected .sel-badge{display: flex;}
#ipl .chip-actions{position: absolute; top: 4px; right: 5px; display: flex; gap: 3px; z-index: 3; opacity: 0; transition: opacity .15s;}
#ipl .page-chip-r:hover .chip-actions,#ipl .page-chip-r:focus .chip-actions,#ipl .page-chip-r:focus-within .chip-actions,#ipl .page-chip-r.rotated .chip-actions{opacity: 1;}
@media (hover: none){#ipl .chip-actions{opacity: 1;}}
#ipl .chip-act{width: 24px; height: 24px; background: rgba(26,26,26,0.85); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-family: var(--font-mono); font-size: 0.8rem; transition: all .15s;}
#ipl .chip-act:hover{background: var(--accent); transform: scale(1.1);}
#ipl .chip-act svg{width: 12px; height: 12px; stroke: #fff; stroke-width: 2; fill: none;}
#ipl .page-chip-r:focus{outline: 2px solid var(--accent); outline-offset: 2px;}
#ipl .page-chip-r .loader{width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite;}
#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.rot 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 .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 .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%; transition: transform .4s cubic-bezier(0.4, 0.0, 0.2, 1);}
#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 .page-nav{display: flex; gap: 4px; align-items: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.05em;}
#ipl .page-nav 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 .page-nav button:hover:not(:disabled){background: var(--ink); color: var(--cream);}
#ipl .page-nav button:disabled{opacity: 0.3; cursor: not-allowed;}
#ipl .page-nav .indicator{min-width: 70px; text-align: center; padding: 0 4px;}
#ipl .rot-group{display: flex; gap: 2px;}
#ipl .rot-group button{width: 36px; height: 36px; background: transparent; border: 1px solid var(--line); cursor: pointer; font-family: var(--font-mono); font-size: 0.9rem; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: all .15s;}
#ipl .rot-group button:hover{background: var(--accent); color: #fff; border-color: var(--accent);}
#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 .preview-modal{padding: 0;}
#ipl .preview-shell{max-height: 100vh; height: 100vh; border: none;}
#ipl .page-toolbar-row{gap: 6px;}
#ipl .quick-btn,#ipl .bulk-btn{padding: 6px 10px; font-size: 0.64rem;}
#ipl .chip-actions{opacity: 1;}}
#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}