:root{
  --bg:#1f2329;--panel:#272b31;--panel2:#2d3239;--panel3:#333840;--line:#444b54;--text:#f2f4f5;--muted:#aeb6bd;--muted2:#7f8992;--accent:#42c7d5;--accent2:#2fb3c0;--accent-soft:#143d43;--yellow:#f2b73e;--danger:#d76b6b;--shadow:0 12px 30px rgba(0,0,0,.28);--sidebar:#22262c;--thumb:#2a2e34;--input:#24282e;--white:#fff;
}
body[data-theme="light"]{
  --bg:#f4f5f7;--panel:#fff;--panel2:#f4f6f8;--panel3:#eef1f4;--line:#d4d9de;--text:#1d2228;--muted:#6e7780;--muted2:#9098a0;--accent:#25b6c6;--accent2:#2099a6;--accent-soft:#e6f7f9;--yellow:#e5a52a;--shadow:0 10px 24px rgba(25,35,45,.12);--sidebar:#f1f3f6;--thumb:#f7f8f9;--input:#fff;--white:#fff;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#111;color:var(--text)}button,select,input{font:inherit}.demo-disclosure{height:38px;background:#091216;color:#c5d2d6;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:11px;border-bottom:1px solid #1c343b;gap:18px}.demo-disclosure strong{color:#ffd84d;margin-right:10px;letter-spacing:.5px}.demo-disclosure span{color:#a9b9be}.demo-disclosure a{color:#49d0da;text-decoration:none;font-weight:700;white-space:nowrap}
.pc-app{height:calc(100vh - 38px);min-height:720px;display:grid;grid-template-columns:158px 1fr;background:var(--bg);overflow:hidden}.pc-sidebar{background:var(--sidebar);border-right:1px solid var(--line);padding:10px 8px 8px;display:flex;flex-direction:column;min-height:0}.pc-logo-card{height:58px;border-radius:5px;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;color:#16323c;box-shadow:0 2px 10px rgba(0,0,0,.08)}.pc-logo-icon{width:38px;height:29px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;align-items:end;transform:skewY(-10deg)}.pc-logo-icon span{display:block;background:linear-gradient(#4ec8db,#199cae);border-radius:2px;height:18px}.pc-logo-icon span:nth-child(2){height:25px;background:linear-gradient(#9bc96c,#4eaa7f)}.pc-logo-text{font-size:17px;font-weight:900;letter-spacing:-.6px}.pc-logo-text span{color:#2bb6c7}.pc-tagline{font-size:5.5px;letter-spacing:.7px;text-align:center;color:var(--muted);margin:7px 0 3px;font-weight:700}.pc-version{font-size:5.5px;text-align:center;color:var(--muted2);margin-bottom:9px}.library-switch{display:grid;gap:4px}.library-row{height:30px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:5px;display:grid;grid-template-columns:20px 1fr auto;align-items:center;text-align:left;padding:0 7px;cursor:pointer;font-size:9px}.library-row.active{background:var(--accent-soft);border-color:var(--accent2)}.library-row span{color:var(--accent)}.library-row em{font-style:normal;color:var(--text);background:rgba(255,255,255,.06);border-radius:12px;padding:2px 5px}.library-row.muted{opacity:.55}.side-section-label{font-size:6px;color:var(--muted);font-weight:900;letter-spacing:.7px;margin:10px 2px 6px}.side-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px}.side-actions button{height:24px;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:4px;font-size:6.3px;padding:0 3px}.side-actions button.muted{opacity:.55}.tree{flex:1;overflow:auto;padding-right:2px;min-height:110px}.tree::-webkit-scrollbar{width:5px}.tree::-webkit-scrollbar-thumb{background:#77818a;border-radius:8px}.tree-row{min-height:24px;display:grid;grid-template-columns:13px 1fr auto;align-items:center;gap:3px;padding:2px 5px;border-radius:4px;color:var(--text);font-size:7.5px;cursor:pointer;border:1px solid transparent}.tree-row:hover{background:var(--panel2)}.tree-row.active{background:var(--accent-soft);border-color:var(--accent2)}.tree-row .twisty{font-size:7px;color:var(--muted)}.tree-row .tree-count{color:var(--muted);font-size:6.7px}.tree-row.level1{padding-left:15px}.tree-row.level2{padding-left:26px}.tree-row.level3{padding-left:37px}.tree-row.utility{color:var(--muted)}.side-utilities{border-top:1px solid var(--line);padding-top:7px;display:grid;gap:1px}.side-utilities button{height:22px;border:0;background:transparent;color:var(--muted);text-align:left;font-size:7px;display:flex;align-items:center;gap:8px;cursor:pointer}.side-utilities button:hover{color:var(--text)}.local-private{margin-top:7px;border:1px solid var(--line);background:var(--panel2);border-radius:5px;padding:6px;display:flex;align-items:center;gap:6px}.local-private>span{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:8px}.local-private strong{display:block;font-size:6.7px}.local-private small{display:block;font-size:5.4px;color:var(--muted);margin-top:1px}
.pc-main{min-width:0;overflow:auto;background:var(--bg);padding:8px 11px 16px}.pc-main::-webkit-scrollbar{width:8px;height:8px}.pc-main::-webkit-scrollbar-thumb{background:#59616a;border-radius:8px}.pc-main-header{height:43px;display:flex;align-items:center;justify-content:space-between;gap:12px}.crumb{font-size:5.8px;color:var(--muted);letter-spacing:1px;font-weight:900}.crumb-block h1{font-size:14px;margin:2px 0 0;line-height:1;color:var(--text)}.header-actions{display:flex;align-items:center;gap:5px}.header-actions button,.header-actions select,.toolbar-row button,.toolbar-row select,.toolbar-row input{height:26px;border:1px solid var(--line);background:var(--input);color:var(--text);border-radius:5px;font-size:7px;font-weight:700;padding:0 9px}.header-actions select{min-width:82px}.header-actions button.accent,.toolbar-row button.accent,.accent{background:linear-gradient(#50cfdd,#35b9c8)!important;color:#fff!important;border-color:#46c8d6!important}.toolbar-row{border:1px solid var(--line);background:var(--panel2);border-radius:5px;margin-bottom:5px;display:flex;align-items:center;gap:4px;min-height:28px;padding:3px 5px;white-space:nowrap}.primary-toolbar{min-height:31px}.primary-toolbar>select{width:83px}.library-stats{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;height:24px;padding:0 7px;font-size:6.1px;color:var(--muted);flex:1;min-width:200px}.library-stats b{color:var(--text)}.thumb-size{display:flex;align-items:center;gap:5px;border:1px solid var(--line);height:24px;padding:0 5px;border-radius:4px;font-size:6px}.thumb-size input{width:62px!important;height:12px!important;padding:0!important;border:0!important}.quick-toolbar strong{font-size:6px;margin-right:3px}.toolbar-row .pill{border-radius:999px;padding:0 8px}.toolbar-row .pill.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.quick-toolbar select{min-width:106px}.filter-toolbar input{width:116px}.semantic-btn{border-color:#45c6d4!important;color:#dffcff!important;background:var(--accent-soft)!important}.filter-spacer{flex:1}.toolbar-row button.muted{opacity:.55}.context-header{border:1px solid var(--line);background:var(--panel2);border-radius:5px;margin:7px 0;padding:9px 10px}.context-header.hidden{display:none}.context-header h2{margin:0;color:var(--text);font-size:14px}.context-header p{margin:3px 0 0;font-size:6.6px;color:var(--muted)}
.content{min-height:400px}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--thumb,170px),1fr));gap:5px;align-items:start}.photo-card{background:var(--thumb);border:1px solid var(--line);border-radius:5px;overflow:hidden;cursor:pointer;min-width:0;box-shadow:0 1px 2px rgba(0,0,0,.1)}.photo-card:hover{border-color:var(--accent)}.photo-card.selected{box-shadow:inset 0 0 0 2px var(--accent);border-color:var(--accent)}.photo-img{aspect-ratio:4/3;background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.photo-img img{width:100%;height:100%;object-fit:cover}.photo-meta{padding:5px 6px 5px}.photo-name{font-weight:900;color:var(--text);font-size:7.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.photo-sub{font-size:5.6px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.photo-location{font-size:5.4px;color:var(--accent);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag-corner{position:absolute;top:4px;right:4px;border-radius:3px;background:#e19231;color:white;font-size:5px;font-weight:900;padding:2px 4px}.empty-state{padding:45px;text-align:center;color:var(--muted);font-size:11px}
.people-page{border:1px solid var(--line);background:var(--panel2);border-radius:5px;padding:9px}.people-page-head{display:flex;align-items:flex-start;justify-content:space-between}.people-page h2{font-size:12px;margin:0}.people-page p{font-size:5.8px;color:var(--muted);margin:3px 0 7px}.people-page .update-btn{height:23px;background:var(--accent);border:1px solid var(--accent);border-radius:4px;color:#fff;font-size:6px;font-weight:900;padding:0 8px}.people-stats{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:7px 0 10px}.stat-card{height:40px;border:1px solid var(--line);background:var(--panel3);border-radius:4px;padding:6px}.stat-card small{display:block;font-size:4.7px;color:var(--muted);letter-spacing:.4px}.stat-card b{display:block;font-size:10px;margin-top:4px}.named-people-title{font-size:7px;font-weight:900;margin:4px 0 6px}.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:4px}.person-card{height:43px;border:1px solid var(--line);background:var(--panel3);border-radius:4px;display:grid;grid-template-columns:32px 1fr;align-items:center;padding:4px;cursor:pointer}.person-card:hover{border-color:var(--accent)}.person-card img{width:28px;height:28px;border-radius:50%;object-fit:cover}.person-card strong{font-size:6.6px;display:block}.person-card span{font-size:5.3px;color:var(--muted)}
.section-label{font-size:8px;color:var(--accent);font-weight:900;margin:8px 0 4px}.semantic-results-head{display:flex;justify-content:space-between;align-items:center;padding:4px 1px 6px;font-size:6.4px;color:var(--muted)}.semantic-results-head strong{font-size:7.2px;color:var(--text)}
.semantic-floating{position:fixed;right:22px;top:104px;width:300px;z-index:40;background:var(--panel2);color:var(--text);border:1px solid var(--accent2);border-radius:6px;box-shadow:var(--shadow);padding:12px;display:none}.semantic-floating.open{display:block}.semantic-floating .float-close{position:absolute;right:7px;top:7px;background:transparent;border:0;color:var(--muted);cursor:pointer}.semantic-floating>small{display:block;color:var(--accent);font-size:6px;font-weight:900}.semantic-floating h3{margin:2px 0 8px;font-size:11px}.semantic-floating p{font-size:6px;color:var(--muted);line-height:1.4;border:1px solid var(--line);padding:8px;border-radius:4px}.semantic-floating label{font-size:6px;font-weight:800;color:var(--text)}.semantic-input-row{display:grid;grid-template-columns:1fr 48px;gap:5px;margin:5px 0}.semantic-input-row input,.semantic-control-row select{height:27px;border:1px solid var(--line);border-radius:4px;background:var(--input);color:var(--text);padding:0 7px;font-size:7px}.semantic-input-row button,.semantic-control-row button{height:27px;border:1px solid var(--line);border-radius:4px;background:var(--panel3);color:var(--text);font-size:6.5px;font-weight:800}.semantic-control-row{display:flex;align-items:end;gap:5px;margin:5px 0}.semantic-control-row label{display:grid;gap:3px;flex:1}.semantic-example{border-top:1px solid var(--line);margin-top:8px;padding-top:7px}.semantic-example>b{display:block;font-size:5px;color:var(--muted);margin-bottom:4px}.semantic-example div{display:flex;flex-wrap:wrap;gap:4px}.semantic-example button{border:1px solid var(--line);background:var(--input);color:var(--text);border-radius:999px;padding:4px 6px;font-size:5.6px;cursor:pointer}
.viewer{position:fixed;inset:0;background:#050708;z-index:70;display:none;color:#fff}.viewer.open{display:flex;flex-direction:column}.viewer-top{height:42px;background:#161a1f;border-bottom:1px solid #343a41;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:10px}.viewer-top button{height:27px;border:1px solid #3e4650;background:#252a31;color:#fff;border-radius:4px;margin-left:4px;font-size:7px;font-weight:800}.viewer-stage{flex:1;min-height:0;display:grid;grid-template-columns:44px 1fr 44px;align-items:center}.viewer-stage img{max-width:100%;max-height:calc(100vh - 56px);object-fit:contain;margin:auto;display:block}.viewer-stage>button{height:60px;border:0;background:transparent;color:#fff;font-size:45px;opacity:.7;cursor:pointer}
.editor{position:fixed;inset:0;background:#1b1f24;z-index:80;display:none;color:#f7f8f9}.editor.open{display:flex;flex-direction:column}.editor-topline{height:66px;border-bottom:1px solid #30363d;background:#1c2025;display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:14px}.editor-topline small{display:block;color:#59d1dc;font-size:6px;font-weight:800;margin-bottom:3px}.editor-topline strong{font-size:8px}.editor-top-actions{display:flex;align-items:center;gap:5px}.editor-top-actions label{font-size:5px;color:#c3cbd0;display:flex;align-items:center;gap:5px}.editor-top-actions select,.editor-top-actions button{height:27px;border:1px solid #46505a;border-radius:5px;background:#2b3037;color:#fff;font-size:6.3px;font-weight:800;padding:0 8px}.editor-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 330px}.editor-canvas-area{min-width:0;padding:8px 12px 16px;display:flex;flex-direction:column;background:#181c20}.zoom-row{height:31px;border:1px solid #333a42;border-radius:5px;background:#23282e;display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:8px}.zoom-row button,.zoom-row b{height:23px;min-width:32px;border:1px solid #454e57;background:#2b3037;color:#fff;border-radius:4px;font-size:6px;display:grid;place-items:center}.zoom-row span{width:190px}.zoom-row button.active{border-color:#4cc8d6}.editor-image-wrap{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#121518;border:1px solid #30363d}.editor-image-wrap img{position:absolute;max-width:94%;max-height:94%;object-fit:contain}.editor-image-wrap #editorAfter{clip-path:inset(0 0 0 50%)}.split-line{position:absolute;left:50%;top:8%;bottom:8%;width:1px;background:#e5e5e5;box-shadow:0 0 0 1px rgba(0,0,0,.4)}.split-line span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#242930;border:1px solid #fff;color:#fff;font-size:8px}.editor-footnote{text-align:center;color:#9fa8af;font-size:5.8px;margin-top:5px}.editor-side{display:grid;grid-template-columns:45px 1fr;border-left:1px solid #30363d;background:#20252a}.editor-tabs{display:flex;flex-direction:column;border-right:1px solid #353d45;background:#1d2227}.editor-tabs button{height:55px;border:0;border-bottom:1px solid #323a42;background:transparent;color:#aeb7bd;font-size:14px;cursor:pointer}.editor-tabs button small{display:block;font-size:5px;margin-top:3px}.editor-tabs button.active{color:#fff;background:#293139;box-shadow:inset 3px 0 0 #4cc8d6}.editor-tabs button.installed-only{position:relative;color:#79838a;background:#191e23}.editor-tabs button.installed-only:hover{color:#c7d0d5;background:#242b31}.editor-tabs button.installed-only::after{content:"APP";position:absolute;right:3px;top:4px;padding:2px 3px;border-radius:3px;background:#1769e0;color:#fff;font-size:3.9px;font-weight:900;letter-spacing:.3px}.editor-tabs button.installed-only small{color:#8e989f}.adjust-panel{padding:10px;overflow:auto}.adjust-panel h3{margin:0 0 8px;font-size:10px}.panel-kicker{color:#b6c1c7;font-size:5.5px;letter-spacing:.5px}.histogram{height:86px;border:1px solid #59616a;background:linear-gradient(135deg,transparent 0 25%,rgba(77,199,213,.25) 25% 26%,transparent 26% 50%,rgba(77,199,213,.20) 50% 51%,transparent 51% 70%,rgba(77,199,213,.18) 70% 71%,transparent 71%),#171b1f;margin:7px 0}.clip-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:7px}.clip-buttons button{height:24px;border:1px solid #52cbd7;background:#253139;color:#e9fbfc;border-radius:4px;font-size:5.3px}.slider-row{display:grid;grid-template-columns:70px 1fr 45px;align-items:center;gap:6px;min-height:35px;border-top:1px solid #30363d}.slider-row label{font-size:6px;font-weight:800}.slider-row input{width:100%;accent-color:#51c8d5}.slider-row output{height:17px;border:1px solid #384149;background:#252b31;display:grid;place-items:center;border-radius:3px;font-size:5.4px;color:#cad2d7}.simulation-ribbon{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:#0b171cdd;border:1px solid #2c5960;color:#d6e8ea;padding:5px 10px;border-radius:999px;font-size:5.7px;z-index:4}.bokeh-note,.panel-note{border:1px solid #39434c;background:#252b31;border-radius:5px;padding:8px;font-size:6px;color:#aeb7bd;line-height:1.45;margin-bottom:7px}
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,15px);background:#071216;color:#fff;border:1px solid #2c6972;border-radius:6px;padding:9px 13px;font-size:7px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){.pc-app{grid-template-columns:145px 1fr}.header-actions span{display:none}.primary-toolbar .library-stats{display:none}.quick-toolbar button:nth-of-type(n+7){display:none}.editor-body{grid-template-columns:1fr 280px}.people-stats{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.demo-disclosure{height:auto;min-height:46px;align-items:flex-start;padding:8px 10px}.demo-disclosure span{display:none}.pc-app{height:auto;min-height:calc(100vh - 46px);grid-template-columns:1fr}.pc-sidebar{display:none}.pc-main{overflow:visible}.pc-main-header{height:auto;padding:8px 0}.header-actions{flex-wrap:wrap;justify-content:flex-end}.toolbar-row{overflow-x:auto}.editor-body{grid-template-columns:1fr}.editor-side{position:absolute;right:0;top:66px;bottom:0;width:290px;box-shadow:-10px 0 25px rgba(0,0,0,.4)}.photo-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.semantic-floating{right:10px;left:10px;width:auto}}

/* =========================================================
   PhotoCorral 1.0.30 rebuilt demo refinements
   ========================================================= */
:root{--blue:#1769e0;--blue-dark:#1050b7;--cyan:#20d3dc;--yellow:#ffd43b;--red:#f04b3e;--accent:#20d3dc;--accent2:#12aeb8}
.demo-disclosure{height:38px;background:var(--yellow);color:#11191e;border-bottom:4px solid var(--red);justify-content:center;position:relative;font-size:11px;font-weight:700}.demo-disclosure strong{color:#11191e;margin-right:8px}.demo-disclosure span{color:#263238}.demo-disclosure a{position:absolute;right:18px;color:#11191e;font-weight:900}.pc-app{height:calc(100vh - 38px);grid-template-columns:205px 1fr}.pc-logo-card{height:62px}.pc-version{font-size:6px}.pc-sidebar{padding:10px}.tree-row{font-size:8px}.tree-row .tree-count{font-size:7px}.pc-main{padding:8px 12px 16px}.header-actions button,.header-actions select,.toolbar-row button,.toolbar-row select,.toolbar-row input{font-size:7.4px}.library-stats{font-size:6.5px}.photo-name{font-size:8px}.photo-sub,.photo-location{font-size:5.8px}

.viewer-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px}.viewer-stage{min-width:0;min-height:0}.viewer-stage img{width:auto;height:auto;max-width:calc(100vw - 390px);max-height:calc(100vh - 62px);object-fit:contain}.viewer-info{border-left:1px solid #343a41;background:#171b20;padding:12px;overflow:auto}.viewer-info.closed{display:none}.viewer-body:has(.viewer-info.closed){grid-template-columns:1fr}.viewer-body:has(.viewer-info.closed) .viewer-stage img{max-width:calc(100vw - 95px)}.viewer-info-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #343a41;padding-bottom:9px;margin-bottom:8px}.viewer-info-head strong{font-size:10px}.viewer-info-head button{border:1px solid #3e4650;background:#252a31;color:#fff;border-radius:4px;width:25px;height:25px}.viewer-info dl{margin:0;display:grid;grid-template-columns:82px 1fr;gap:7px 8px;font-size:8px;line-height:1.35}.viewer-info dt{color:#8fa0a8;font-weight:800}.viewer-info dd{margin:0;color:#eef4f5;word-break:break-word}

.demo-modal{position:fixed;inset:0;z-index:140;background:rgba(3,8,11,.78);display:none;align-items:center;justify-content:center;padding:22px}.demo-modal.open{display:flex}.demo-modal-card{width:min(520px,calc(100vw - 34px));background:#fff8eb;color:#11191e;border-radius:22px;padding:27px;box-shadow:0 32px 75px rgba(0,0,0,.42);border-top:6px solid var(--cyan)}.demo-modal-icon{width:48px;height:48px;border-radius:14px;background:#10191f;color:#fff;display:grid;place-items:center;font-weight:900;font-size:12px;margin-bottom:15px}.demo-modal-card h2{font-size:25px;line-height:1.05;margin:0 0 11px;letter-spacing:-.04em}.demo-modal-card p{font-size:13px;line-height:1.6;color:#56636a;margin:0}.demo-modal-actions{display:flex;gap:9px;margin-top:20px}.demo-modal-actions button,.demo-modal-actions a{min-height:42px;border-radius:7px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;text-decoration:none}.demo-modal-actions button{border:1px solid var(--blue);background:var(--blue);color:white}.demo-modal-actions a{border:1px solid #c6c0b5;color:#11191e;background:transparent}

.empty-state-card{max-width:650px;margin:45px auto;padding:30px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);text-align:center}.empty-state-card h2{font-size:18px;margin:0 0 9px}.empty-state-card p{font-size:9px;line-height:1.55;color:var(--muted);margin:0}.empty-state-card button{margin-top:15px;height:30px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--text);border-radius:5px;font-size:7px;font-weight:800;padding:0 10px}.collection-overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:6px}.overview-card{border:1px solid var(--line);border-radius:7px;background:var(--panel2);padding:12px;cursor:pointer}.overview-card:hover{border-color:var(--accent)}.overview-card small{display:block;color:var(--accent);font-size:6px;text-transform:uppercase;font-weight:900;letter-spacing:.6px}.overview-card strong{display:block;font-size:10px;margin-top:4px}.overview-card span{display:block;color:var(--muted);font-size:6.5px;margin-top:4px}

.photo-card{position:relative}.photo-card::before{content:"";position:absolute;left:6px;top:6px;z-index:3;width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,255,255,.9);background:rgba(15,25,30,.55)}.photo-card.selected::before{content:"✓";display:grid;place-items:center;font-size:9px;background:var(--cyan);color:#06161a;border-color:var(--cyan);font-weight:900}.photo-card.selected{box-shadow:inset 0 0 0 2px var(--accent);border-color:var(--accent)}

@media(max-width:1100px){.pc-app{grid-template-columns:180px 1fr}.viewer-body{grid-template-columns:1fr 260px}.viewer-stage img{max-width:calc(100vw - 345px)}}
@media(max-width:760px){.demo-disclosure{justify-content:flex-start}.demo-disclosure a{display:none}.pc-app{height:auto;grid-template-columns:1fr}.viewer-body{grid-template-columns:1fr}.viewer-info{display:none}.viewer-stage img{max-width:calc(100vw - 90px);max-height:calc(100vh - 65px)}}
.photo-card::before{display:none}.photo-select{position:absolute;left:6px;top:6px;z-index:4;width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.95);background:rgba(15,25,30,.55);color:#07171b;font-size:10px;font-weight:900;display:grid;place-items:center;padding:0}.photo-card.selected .photo-select{background:var(--cyan);border-color:var(--cyan)}
.semantic-results-head button{height:25px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--text);border-radius:5px;font-size:6px;font-weight:800;padding:0 8px}


/* =========================================================
   PhotoCorral 1.0.30 web demo — interactive Adjust v3
   ========================================================= */
.editor-image-wrap{--split:50%;--preview-transform:scale(1) rotate(0deg) scaleX(1) scaleY(1);cursor:default;isolation:isolate}
.editor-layer-img{position:absolute!important;inset:0;margin:auto;max-width:94%!important;max-height:94%!important;width:auto!important;height:auto!important;object-fit:contain;transform:var(--preview-transform);transform-origin:center center;will-change:filter,transform,mask-image;user-select:none;-webkit-user-drag:none;pointer-events:none}
.editor-after-wrap{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 var(--split));overflow:hidden;pointer-events:none}
.editor-after-wrap .editor-layer-img{z-index:2}
.editor-after-wrap .editor-blur-layer{z-index:1;opacity:0;transform:var(--preview-transform) scale(1.025)}
.editor-after-wrap .editor-mask-effect{z-index:4;opacity:0}
.editor-after-wrap .editor-retouch-layer{z-index:5;opacity:0}
.editor-temp-tint{position:absolute;inset:0;z-index:3;opacity:0;mix-blend-mode:color;pointer-events:none}
#editorBase{z-index:1}
.split-line{z-index:12;left:var(--split);cursor:ew-resize;touch-action:none;width:2px!important;background:#fff!important;box-shadow:0 0 0 1px rgba(0,0,0,.65),0 0 8px rgba(255,255,255,.35)!important}
.split-line span{cursor:ew-resize;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.editor-image-wrap.split-dragging,.editor-image-wrap.split-dragging *{cursor:ew-resize!important}
.editor-image-wrap.view-before .editor-after-wrap{display:none}
.editor-image-wrap.view-before .split-line,.editor-image-wrap.view-after .split-line{display:none}
.editor-image-wrap.view-after .editor-after-wrap{clip-path:none!important}
.zoom-row button{cursor:pointer}.zoom-row button.active{background:#183a40;border-color:#4cc8d6;color:#eaffff}
.mask-overlay{position:absolute;inset:3%;z-index:8;pointer-events:none;opacity:0;border-radius:2px;transition:opacity .15s;background:transparent;mix-blend-mode:screen}
.mask-overlay.visible{opacity:.75}
.mask-overlay.mask-sky{background:linear-gradient(to bottom,rgba(32,211,220,.55) 0%,rgba(32,211,220,.28) 36%,transparent 62%)}
.mask-overlay.mask-foreground{background:linear-gradient(to top,rgba(32,211,220,.55) 0%,rgba(32,211,220,.28) 38%,transparent 65%)}
.mask-overlay.mask-subject{background:radial-gradient(ellipse 27% 43% at var(--focus-x,50%) var(--focus-y,48%),rgba(32,211,220,.62) 0%,rgba(32,211,220,.35) 55%,transparent 75%)}
.mask-overlay.mask-background{background:radial-gradient(ellipse 30% 45% at var(--focus-x,50%) var(--focus-y,48%),transparent 0%,transparent 53%,rgba(32,211,220,.28) 68%,rgba(32,211,220,.56) 100%)}
.crop-guide{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);width:76%;height:70%;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 9999px rgba(0,0,0,.28);display:none;pointer-events:none}
.crop-guide.visible{display:block}.crop-guide::before,.crop-guide::after,.crop-guide span::before,.crop-guide span::after{content:"";position:absolute;background:rgba(255,255,255,.55)}
.crop-guide::before{left:33.333%;top:0;bottom:0;width:1px}.crop-guide::after{left:66.666%;top:0;bottom:0;width:1px}.crop-guide span::before{top:33.333%;left:0;right:0;height:1px}.crop-guide span::after{top:66.666%;left:0;right:0;height:1px}
.crop-guide[data-aspect="1:1"]{width:min(62%,62vh);height:auto;aspect-ratio:1/1}.crop-guide[data-aspect="4:3"]{width:70%;height:auto;aspect-ratio:4/3}.crop-guide[data-aspect="16:9"]{width:78%;height:auto;aspect-ratio:16/9}.crop-guide[data-aspect="original"]{width:76%;height:70%}
.retouch-cursor{position:absolute;z-index:13;width:var(--retouch-size,70px);height:var(--retouch-size,70px);left:var(--retouch-x,50%);top:var(--retouch-y,50%);transform:translate(-50%,-50%);border:1px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.6);display:none;pointer-events:none}
.retouch-cursor.visible{display:block}.editor-image-wrap.retouch-mode{cursor:crosshair}.editor-image-wrap.bokeh-mode{cursor:crosshair}
.adjust-panel .control-group{display:grid;gap:5px;margin:8px 0 10px}.adjust-panel .control-row{display:flex;gap:5px;flex-wrap:wrap}.adjust-panel .control-row button{height:26px;border:1px solid #46505a;border-radius:4px;background:#282f35;color:#dce4e8;font-size:5.8px;font-weight:800;padding:0 8px;cursor:pointer}.adjust-panel .control-row button.active{border-color:#51c8d5;background:#173b41;color:#efffff}.adjust-panel .control-row button:hover{border-color:#51c8d5}.panel-help{font-size:5.8px;line-height:1.5;color:#aeb7bd;margin:6px 0 9px}.panel-help strong{color:#eaf7f8}.mini-action{width:100%;height:28px;border:1px solid #4ecbd8!important;background:#193941!important;color:#ecfeff!important;border-radius:4px;font-size:6px!important;font-weight:900!important;cursor:pointer}.mini-action.secondary{border-color:#4a535c!important;background:#292f35!important}.slider-row output{font-variant-numeric:tabular-nums}
@media(max-width:760px){.editor-side{width:min(330px,86vw)}.zoom-row span{width:35px}.zoom-row button,.zoom-row b{min-width:29px;font-size:5.5px}.simulation-ribbon{display:none}}
/* editor v3 overrides */
.editor-image-wrap #editorAfter{clip-path:none!important}
.clip-buttons button.active{background:#704137;border-color:#ff7a63;color:#fff}


/* =========================================================
   PhotoCorral web demo — editor interaction corrections v4
   Retouch is draggable; Mask precedes Bokeh; subject/focus guides
   align to the displayed photograph instead of the black stage.
   ========================================================= */
.mask-overlay{
  inset:auto;
  border-radius:2px;
  overflow:hidden;
}
.retouch-cursor{
  left:0;
  top:0;
  pointer-events:none;
  touch-action:none;
  background:rgba(255,255,255,.035);
  box-shadow:0 0 0 1px rgba(0,0,0,.75),0 0 0 3px rgba(32,211,220,.15);
}
.retouch-cursor::before,.retouch-cursor::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:rgba(255,255,255,.9);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.retouch-cursor::before{width:10px;height:1px}.retouch-cursor::after{width:1px;height:10px}
.retouch-cursor span{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);font-size:5px;font-weight:900;color:#fff;background:#151b20cc;border:1px solid #56626b;border-radius:999px;padding:3px 6px;white-space:nowrap}
.retouch-cursor span::after{content:"DRAG"}
.focus-guide{
  position:absolute;
  z-index:12;
  display:none;
  left:0;top:0;
  border:2px solid rgba(255,255,255,.95);
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.75),0 0 18px rgba(32,211,220,.28);
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.focus-guide.visible{display:block}
.focus-guide.mask-guide{border-color:#20d3dc;border-style:dashed;background:rgba(32,211,220,.05)}
.focus-guide.background-guide{border-color:#ffd43b}
.focus-guide span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:3px 6px;border-radius:999px;background:#11191ecc;border:1px solid rgba(255,255,255,.45);font-size:5px;font-weight:900;color:#fff;letter-spacing:.4px}
.editor-image-wrap.retouch-mode,.editor-image-wrap.bokeh-mode,.editor-image-wrap.mask-point-mode{cursor:crosshair;touch-action:none}
.editor-image-wrap.image-interaction-dragging{cursor:grabbing!important}
.editor-image-wrap.image-interaction-dragging *{cursor:grabbing!important}
.adjust-panel .interaction-tip{margin:7px 0 10px;padding:8px;border:1px solid #2f6970;border-radius:5px;background:#17343a;color:#dffbfd;font-size:6px;line-height:1.45}
.adjust-panel .interaction-tip strong{color:#fff}


/* =========================================================
   PhotoCorral web demo — live clipping warnings v6
   Mirrors the installed app: red = clipped highlights,
   blue = clipped shadows. Preview-only.
   ========================================================= */
.editor-after-wrap .editor-clipping-layer{
  z-index:9;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}
.clip-buttons button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:0 7px;
}
.clip-buttons button[data-clip="highlights"].active{
  background:#672d2d;
  border-color:#ff5b5b;
  color:#fff;
}
.clip-buttons button[data-clip="shadows"].active{
  background:#223f78;
  border-color:#5f91ff;
  color:#fff;
}
.clip-rate{
  min-width:34px;
  text-align:right;
  font-size:4.9px;
  color:#cbd4da;
  font-variant-numeric:tabular-nums;
}
.clip-buttons button.active .clip-rate{color:#fff}
.clipping-help{
  margin:-1px 0 7px;
  color:#98a4ab;
  font-size:5.2px;
  line-height:1.4;
}


/* PhotoCorral-style right-click photo actions */
.demo-photo-context{position:fixed;z-index:175;display:none;align-items:stretch;gap:10px;filter:drop-shadow(0 24px 45px rgba(0,0,0,.42));max-width:calc(100vw - 24px)}
.demo-photo-context.open{display:flex}
.demo-context-menu{width:310px;max-height:calc(100vh - 24px);overflow:auto;background:#111c22;color:#eaf4f8;border:1px solid #36505d;border-radius:10px;padding:7px;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.demo-context-heading{padding:9px 10px 10px;border-bottom:1px solid #31444e;margin-bottom:5px;display:grid;gap:3px}
.demo-context-heading span{font-size:9px;font-weight:900;letter-spacing:.13em;color:#20d3dc}
.demo-context-heading small{font-size:10px;color:#a9bdc7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-context-menu button{width:100%;min-height:34px;border:0;background:transparent;color:#eaf4f8;border-radius:6px;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;text-align:left;padding:5px 9px;cursor:pointer;font:inherit;font-size:11px}
.demo-context-menu button:hover,.demo-context-menu button:focus-visible{background:#203640;outline:none}
.demo-context-menu button.context-demo-action:hover{background:#123b43}
.demo-context-menu button.context-safe-remove{color:#ffb4ad}
.demo-context-menu .context-icon{width:21px;height:21px;display:grid;place-items:center;color:#9fc2d0;font-size:13px}
.demo-context-menu .context-label{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.demo-context-menu .context-chip{font-size:7px;line-height:1;border:1px solid #2b7e84;color:#7eeff2;border-radius:999px;padding:3px 5px;font-weight:900;letter-spacing:.08em;flex:0 0 auto}
.demo-context-menu .context-chip.app{border-color:#536670;color:#aebbc1}
.demo-context-separator{height:1px;background:#31444e;margin:5px 4px}
.demo-context-note{width:280px;max-height:calc(100vh - 24px);overflow:auto;background:#fff7e9;color:#11191e;border-radius:10px;border-top:6px solid #ffd43b;padding:18px 18px 16px;box-shadow:0 18px 42px rgba(0,0,0,.25)}
.demo-context-note-kicker{font-size:8px;font-weight:900;letter-spacing:.13em;color:#1769e0;margin-bottom:9px}
.demo-context-note h3{font-size:19px;line-height:1.06;letter-spacing:-.035em;margin:0 0 10px}
.demo-context-note p{font-size:11px;line-height:1.55;color:#4f5d64;margin:0}
.demo-context-note-list{display:grid;gap:8px;margin:15px 0 13px}
.demo-context-note-list span{display:block;background:#fff;border:1px solid #ded6ca;border-radius:7px;padding:9px 10px;font-size:9px;line-height:1.45;color:#59636a}
.demo-context-note-list b{display:block;color:#11191e;font-size:9px;margin-bottom:2px}
.demo-context-hint{display:block;color:#6d767b;font-size:8px;line-height:1.45}
.photo-card.context-target{outline:2px solid #20d3dc;outline-offset:2px}
body[data-theme="light"] .demo-context-menu{background:#16272e;color:#f5fbfd}
@media(max-width:720px){.demo-photo-context{flex-direction:column;max-height:calc(100vh - 18px);overflow:auto}.demo-context-menu,.demo-context-note{width:min(330px,calc(100vw - 24px));max-height:none}.demo-context-note{padding:14px}}
