/* © 2026 IG Tools — All rights reserved. Unauthorized copying, reuse, or redistribution of this code is prohibited. */
/* IG Tools — styles */
  /* Design tokens — see AGENTS.md §10. Light is primary, dark adapts from it.
     Colour is a chip, not a surface; depth comes from light, not from a lighter grey. */
  :root{
    --g1:#8A3FFC;--g2:#FF4D8D;--g3:#FF9A3D;
    --grad:linear-gradient(120deg,var(--g1),var(--g2) 55%,var(--g3));
    --accent:#007AFF;                       /* one interactive accent, iOS system blue */
    --logo:#FF2D55;                         /* this tool's identity colour — same as its home-page card */
    --radius:15px;
    --r-card:20px;--r-tile:14px;--r-control:11px;--r-pill:999px;
    /* One motion curve everywhere: critically damped spring, response ~0.4s */
    --spring:cubic-bezier(.32,.72,0,1);
    --dur:.42s;--dur-fast:.26s;--dur-press:.1s;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  }
  :root,[data-theme="light"]{
    --bg:#F5F5F7;--panel:#FFFFFF;--panel-2:#FFFFFF;
    --chrome:rgba(255,255,255,.72);--chrome-solid:#FBFBFD;
    --text:#1D1D1F;--muted:#6E6E73;--muted-2:#8E8E93;
    --line:rgba(0,0,0,.08);
    --fill:rgba(120,120,128,.12);--fill-hi:rgba(120,120,128,.2);
    --ok:#34C759;--warn:#B25E00;--warn-bg:#FFF4E0;--warn-line:rgba(178,94,0,.22);
    --info:#0A6E63;--info-bg:#E7F7F4;--info-line:rgba(10,110,99,.22);
    --err:#D70015;
    --check-a:#EDEDF0;--check-b:#E3E3E8;      /* transparency checkerboard */
    --sh:0 1px 2px rgba(0,0,0,.04), 0 6px 16px -6px rgba(0,0,0,.10);
    --sh-hi:0 2px 4px rgba(0,0,0,.05), 0 18px 34px -12px rgba(0,0,0,.18);
    --sh-modal:0 24px 70px -12px rgba(0,0,0,.28);
  }
  [data-theme="dark"]{
    --bg:#000000;--panel:#1C1C1E;--panel-2:#242426;
    --chrome:rgba(28,28,30,.68);--chrome-solid:#141416;
    --text:#F5F5F7;--muted:rgba(235,235,245,.62);--muted-2:rgba(235,235,245,.4);
    --line:rgba(255,255,255,.11);
    --fill:rgba(120,120,128,.24);--fill-hi:rgba(120,120,128,.36);
    --ok:#30D158;--warn:#FFD08A;--warn-bg:#2E2210;--warn-line:rgba(255,208,138,.24);
    --info:#A9E6DC;--info-bg:#11251F;--info-line:rgba(169,230,220,.22);
    --err:#FF6961;
    --check-a:#212127;--check-b:#191920;
    --sh:0 1px 2px rgba(0,0,0,.5);
    --sh-hi:0 2px 6px rgba(0,0,0,.6), 0 18px 34px -14px rgba(0,0,0,.8);
    --sh-modal:0 24px 70px rgba(0,0,0,.7);
  }
  *{box-sizing:border-box}
  html,body{margin:0;overflow-x:hidden}
  body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;padding:26px 18px 60px;
    -webkit-font-smoothing:antialiased;font-optical-sizing:auto;
    transition:background .5s var(--spring),color .5s var(--spring)}
  .wrap{max-width:940px;margin:0 auto}
  header{margin-bottom:22px}
  .topbar{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
  .logo{
    width:42px;height:42px;flex-shrink:0;border-radius:var(--r-tile);
    background:var(--logo);
    display:flex;align-items:center;justify-content:center;
    transition:transform var(--dur-press) ease-out;
  }
  .logo:active{transform:scale(.92)}
  .logo svg{width:24px;height:24px;display:block}
  /* One solid accent word, not the old rainbow gradient split — the highlighted
     word now uses the exact colour of the icon tile beside it, so logo and
     wordmark read as one mark instead of two competing colour systems.
     Tracking eases up from the home hero's -.032em: this sits at 28px, not 64px,
     and tighter tracking reads as cramped rather than tight at this size. */
  .wordmark{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0;color:var(--text)}
  .wordmark .g{color:var(--logo)}
  .badge{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--fill);border-radius:var(--r-pill);padding:4px 10px;letter-spacing:.03em;align-self:center}
  .langseg{margin-left:auto;flex-shrink:0;display:flex;background:var(--fill);border-radius:var(--r-control);padding:2px;gap:2px}
  .langseg button{background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;padding:6px 10px;border-radius:.5rem;cursor:pointer;
    transition:background var(--dur-fast) var(--spring),color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
  .langseg button:active{transform:scale(.94)}
  .langseg button.on{background:var(--panel);color:var(--text);box-shadow:var(--sh)}

  @media(max-width:430px){.wordmark{font-size:23px}.badge{display:none}}
  .sub{color:var(--muted);font-size:14px;margin:11px 0 0;line-height:1.5}

  .drop{display:block;margin-top:20px;border:1.5px dashed var(--line);border-radius:var(--r-card);background:var(--panel);padding:44px 24px;text-align:center;cursor:pointer;position:relative;
    box-shadow:var(--sh);transition:border-color var(--dur) var(--spring),box-shadow var(--dur) var(--spring),transform var(--dur) var(--spring)}
  .drop:hover{border-color:var(--accent);box-shadow:var(--sh-hi);transform:translateY(-2px)}
  .drop:active{transform:scale(.995);box-shadow:var(--sh);transition-duration:var(--dur-press);transition-timing-function:ease-out}
  .drop .big{font-size:16px;font-weight:650}
  .drop .small{color:var(--muted);font-size:13px;margin-top:6px}
  .drop .icon{font-size:32px;margin-bottom:10px;color:var(--accent)}
  .pill{display:inline-block;margin-top:16px;background:var(--accent);color:#fff;font-size:15px;font-weight:590;letter-spacing:-.01em;padding:12px 26px;border-radius:var(--r-control)}
  /* Second entry button on the drop card — ported from Color Grade. */
  .pill-2{display:inline-block;margin:16px 0 0 9px;background:var(--panel);color:var(--text);border:1px solid var(--line);font-size:14px;font-weight:590;letter-spacing:-.01em;padding:11px 20px;border-radius:var(--r-control);cursor:pointer}
  .pill-2:hover{border-color:var(--accent);color:var(--accent)}
  /* On a narrow card the two buttons stack — drop the side gap so they stay centred. */
  @media(max-width:640px){ .pill-2{margin:10px 0 0} }
  .drop.loading{pointer-events:none}
  .drop.loading .content{display:none}
  .loader{display:none;flex-direction:column;align-items:center;gap:13px}
  .drop.loading .loader{display:flex}
  .spinner{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .loader .lt{font-size:14px;font-weight:600}.loader .ls{font-family:var(--mono);font-size:12px;color:var(--muted)}

  .banner{display:none;margin-top:14px;padding:13px 15px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-control);font-size:13.5px;color:var(--warn);line-height:1.55}
  .banner.on{display:block}.banner b{color:var(--text)}
  .tt{position:fixed;z-index:200;background:var(--chrome-solid);color:var(--text);font-size:12px;line-height:1.4;padding:8px 11px;border-radius:.625rem;max-width:260px;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--spring);box-shadow:var(--sh-hi);border:1px solid var(--line)}
  .tt.on{opacity:1}
  /* Dim to focus: a modal task pairs the sheet with a scrim that pushes the page back. */
  .modal{position:fixed;inset:0;z-index:600;overscroll-behavior:contain;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:20px}
  .modal.on{display:flex}
  .modal-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;max-width:340px;width:100%;color:var(--text);box-shadow:var(--sh-modal);
    animation:igSheet var(--dur) var(--spring) both}
  /* Materialise, don't just fade: scale and opacity together read as a real surface arriving. */
  @keyframes igSheet{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
  .modal-title{font-size:16px;font-weight:750;margin-bottom:6px}
  .modal-lbl{font-size:12px;color:var(--muted);margin:14px 0 7px}
  .modal-opts{display:flex;gap:8px;flex-wrap:wrap}
  .modal-opts button{flex:1;min-width:64px;padding:11px 8px;border-radius:var(--r-control);border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer;font-weight:590;font-size:14px;
    transition:background var(--dur-fast) var(--spring),border-color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
  .modal-opts button:active{transform:scale(.97)}
  .modal-opts button.on{background:var(--accent);border-color:transparent;color:#fff}
  .modal-actions{display:flex;gap:8px;margin-top:20px}
  .modal-actions button{flex:1;padding:12px;border-radius:var(--r-control);border:none;cursor:pointer;font-weight:590;font-size:14px;
    transition:transform var(--dur-press) ease-out,filter var(--dur-fast) var(--spring)}
  .modal-actions button:active{transform:scale(.97)}
  #vmCancel{background:var(--bg);color:var(--text);border:1px solid var(--line)}
  #vmGo{background:var(--accent);color:#fff}
  #procModal{z-index:400;background:rgba(0,0,0,.58)}
  #procModal .modal-box{max-width:280px}
  .rawbar{display:none;position:relative;margin-top:12px;padding:12px 38px 12px 14px;background:var(--info-bg);border:1px solid var(--info-line);border-radius:var(--r-control);font-size:13px;color:var(--info);line-height:1.5}
  .rawbar.on{display:block}.rawbar b{color:var(--text)}
  .rawx{position:absolute;top:8px;right:8px;width:22px;height:22px;border:none;background:transparent;color:var(--info);font-size:14px;cursor:pointer;border-radius:50%}
  .rawx:hover{background:var(--fill-hi);color:var(--text)}
  .status{display:none;margin-top:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-control);font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.65;white-space:pre-wrap;word-break:break-word;box-shadow:var(--sh)}
  .status.on{display:block}.status b{color:var(--text)}.status .err{color:var(--err)}.status .ok{color:var(--ok)}

  .panel{display:none;margin-top:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;box-shadow:var(--sh)}
  .row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
  .ctrl label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  /* Ported verbatim from Collage Maker (image-stacker) so both tools share one dropdown. */
  .sel{appearance:none;-webkit-appearance:none;background:var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239695A2' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat right 11px center;border:1px solid var(--line);color:var(--text);font-family:var(--sans);font-size:14px;font-weight:600;padding:10px 32px 10px 12px;border-radius:10px;cursor:pointer;min-width:150px;max-width:100%;transition:.12s}
  .sel:hover{border-color:var(--muted-2)}
  .sel:focus{outline:none;border-color:var(--accent)}
  .seg{display:flex;flex-wrap:wrap;background:var(--fill);border-radius:var(--r-control);padding:2px;gap:2px}
  .seg button{background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:-.005em;padding:8px 13px;border-radius:.5625rem;cursor:pointer;white-space:nowrap;
    transition:background var(--dur-fast) var(--spring),color var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
  .seg button:active{transform:scale(.96)}
  .seg button .rt{display:block;font-weight:700}
  .seg button .r{font-family:var(--mono);font-size:10px;opacity:.7;display:block;margin-top:1px}
  /* The selected option is a raised neutral thumb, not a painted surface. */
  .seg button.on{background:var(--panel);color:var(--text);font-weight:590;box-shadow:var(--sh)}
  .seg button.on .r{opacity:.7}
  .right{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;flex:1 1 auto}
  .btn-ghost{background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:500;padding:9px 13px;border-radius:var(--r-control);cursor:pointer;box-shadow:var(--sh);
    transition:border-color var(--dur-fast) var(--spring),background var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
  .btn-ghost:active{transform:scale(.96)}
  .acts{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-end;flex:1 1 auto;min-width:0}
  .acts .meta{margin-left:auto}
  .btn-ghost:hover{border-color:var(--accent);color:var(--text)}
  .btn-ghost.on{border-color:transparent;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);font-weight:590}
  /* iOS slider: thin neutral track, white puck that catches light. */
  .slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-pill);background:var(--fill);border:none;outline:none}
  .slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.14)}
  .slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.14)}
  .cropHint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
  .meta{font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.65;text-align:right;padding-bottom:2px;margin-left:auto}
  .meta b{color:var(--text)}

  .stage{display:none;margin-top:18px;position:relative}
  .tip{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:11px;font-size:13px;color:var(--muted)}
  .tip b{color:var(--accent);font-weight:590}
  /* touch-action:none over the whole crop stage so two-finger pinch works even when a finger lands
     off the white box / on the checkerboard — otherwise the browser claims it as native page-zoom. */
  .shell{position:relative;background:repeating-conic-gradient(var(--check-a) 0% 25%,var(--check-b) 0% 50%) 50%/22px 22px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;justify-content:center;align-items:center;padding:14px;min-height:180px;touch-action:none}
  .frame{position:relative;display:inline-block;line-height:0;max-width:100%}
  .frame.draggable{cursor:grab}
  .frame.dragging{cursor:grabbing}
  .frame img{max-width:100%;max-height:74vh;display:block;border-radius:3px}
  .ov{position:absolute;inset:0;pointer-events:none}
  .dim{position:absolute;background:rgba(20,20,23,.68)}
  .crop{position:absolute;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.4);pointer-events:auto;cursor:grab;touch-action:none}
  .crop.drag{cursor:grabbing}.crop.locked{cursor:default;touch-action:auto}
  .seam{position:absolute;background:rgba(255,255,255,.9);pointer-events:none}
  .crop .tag{pointer-events:none}
  .seam.v{top:0;bottom:0;width:2px;transform:translateX(-1px)}
  .seam.h{left:0;right:0;height:2px;transform:translateY(-1px)}
  .tag{position:absolute;background:rgba(28,28,30,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;transform:translate(-50%,-50%)}
  .movehint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;pointer-events:none;opacity:.9}
  .proc{position:absolute;inset:0;background:var(--chrome);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:none;flex-direction:column;align-items:center;justify-content:center;gap:11px;border-radius:3px;z-index:9}
  .proc.on{display:flex}.proc .lt{font-size:14px;font-weight:600}

  .igwrap{margin-top:20px}
  .igbar{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:13px;flex-wrap:wrap}
  .iglabel{font-size:13px}
  .igtoggle{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
  .igtoggle button{background:none;border:none;color:var(--muted);font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:6px;cursor:pointer}
  .igtoggle button.on{background:var(--panel);color:var(--text);font-weight:590;box-shadow:var(--sh)}
  .igbtn{background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:12.5px;font-weight:700;padding:8px 13px;border-radius:9px;cursor:pointer;transition:.12s}
  .igbtn:hover{border-color:var(--accent)}
  .igbtn.on{background:color-mix(in srgb,var(--accent) 15%,transparent);border-color:transparent;color:var(--accent);font-weight:590}
  .igbtn:disabled{opacity:.6;cursor:default}
  .tools-bar{display:flex;gap:8px;margin-top:15px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:11px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tools-bar::-webkit-scrollbar{display:none}
  .tools-bar > *{flex-shrink:0}

  /* phone view */
  .igphone{display:none;position:relative;justify-content:center;align-items:center}
  .igwrap.phone .igphone{display:flex}
  .device{position:relative;background:#0b0b0d;border:1px solid #3a3a44;border-radius:40px;padding:13px;box-shadow:0 20px 55px rgba(0,0,0,.55),inset 0 0 0 2px #212127}
  .device .notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:32%;height:7px;background:#000;border-radius:6px;z-index:5}
  .screen{position:relative;overflow:hidden;border-radius:28px;background:#000}
  .ptrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;cursor:grab;user-select:none;-webkit-user-select:none}
  .ptrack.grabbing{cursor:grabbing;scroll-behavior:auto}
  .ptrack::-webkit-scrollbar{display:none}
  .pslide{flex:0 0 100%;scroll-snap-align:start;height:100%;position:relative}
  .pslide canvas{width:100%;height:100%;object-fit:cover;display:block}
  .pslide .num{position:absolute;top:12px;right:14px;background:rgba(0,0,0,.62);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;padding:2px 8px;border-radius:11px;z-index:3}

  /* joined side-by-side view — no gaps */
  .igrow{display:none}
  .igwrap.row .igrow{display:flex;justify-content:center}
  .strip{display:flex;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.45);max-width:100%}
  .strip .cell{flex:1 1 0;position:relative;min-width:0}
  .strip .cell+.cell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,.3);z-index:2}
  .strip .cell canvas{width:100%;height:100%;object-fit:cover;display:block}
  .strip .cell .num{position:absolute;top:9px;right:11px;background:rgba(0,0,0,.55);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px}

  .igarrow{position:absolute;z-index:6;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:22px;line-height:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
  .igarrow.left{left:0}.igarrow.right{right:0}
  .igarrow:hover{border-color:var(--accent);color:var(--accent)}
  .igdots{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
  .igwrap.row .igdots{display:none}
  .igdot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:.2s}
  .igdot.on{background:var(--accent);width:22px;border-radius:4px}
  @media(max-width:640px){.igarrow{display:none}}

  .pieces{display:grid;gap:13px;margin-top:12px}
  .pieces-opt{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .piece{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px;display:flex;align-items:center;gap:13px}
  .piece .thumb{width:96px;height:96px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#000;border:1px solid var(--line);border-radius:7px;overflow:hidden}
  .piece .thumb canvas{max-width:100%;max-height:100%}
  .piece .info{flex:1;min-width:0}
  .piece .info .n{font-weight:650;font-size:15px}
  .piece .info .d{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:3px}
  .dl{background:var(--accent);color:#fff;border:none;font-family:var(--sans);font-size:14px;font-weight:590;padding:11px 17px;border-radius:var(--r-control);cursor:pointer;white-space:nowrap;
    transition:filter var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
  .dl:active{transform:scale(.96)}
  .dl:hover{filter:brightness(1.07)}.dl.done{background:var(--ok)}
  /* The primary action on the page: one solid accent, sized to be unmistakable. */
  .dl-all{width:100%;margin-top:15px;background:var(--accent);color:#fff;border:none;font-size:15px;font-weight:590;letter-spacing:-.01em;padding:15px;border-radius:var(--r-control);cursor:pointer;
    transition:filter var(--dur-fast) var(--spring),transform var(--dur-press) ease-out}
  .dl-all:hover{filter:brightness(1.06)}
  .dl-all:active{transform:scale(.985)}
  .note{display:flex;gap:8px;margin-top:16px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--muted);line-height:1.55}
  .note b{color:var(--text)}
  .seo{content-visibility:auto;contain-intrinsic-size:1px 1200px;margin-top:46px;border-top:1px solid var(--line);padding-top:30px;color:var(--muted);font-size:15px;line-height:1.7;letter-spacing:-.003em}
  .seo h2{font-size:1.375rem;font-weight:600;letter-spacing:-.018em;margin:0 0 12px;color:var(--text)}
  .seo h3{font-size:1.0625rem;font-weight:590;letter-spacing:-.012em;margin:26px 0 10px;color:var(--text)}
  .seo p{margin:0 0 12px}
  .seo ul,.seo ol{margin:0 0 12px;padding-left:22px}
  .seo li{margin:6px 0}
  .seo .q{font-weight:590;color:var(--text);margin:16px 0 4px}
  .seo a{color:var(--accent);text-decoration:none}
  .seo a:hover{text-decoration:underline}
  .foot{margin-top:42px;text-align:center;padding-bottom:6px}
  .foot a{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;padding:9px 16px;border:1px solid var(--line);border-radius:22px;transition:.15s}
  .foot a:hover{color:var(--text);border-color:var(--accent);background:var(--panel)}
  .foot a svg{color:var(--accent)}
  .foot .by{opacity:.85}
  .page-drop{position:fixed;inset:0;background:color-mix(in srgb,var(--accent) 12%,transparent);border:3px dashed var(--accent);display:none;align-items:center;justify-content:center;z-index:50;pointer-events:none}
  .page-drop.on{display:flex}
  .page-drop span{font-size:20px;font-weight:590;color:var(--text);background:var(--panel);padding:16px 26px;border-radius:var(--r-control);border:1px solid var(--accent);box-shadow:var(--sh-hi)}
  @media(min-width:640px){.pieces{grid-template-columns:1fr 1fr}}
  .imgstrip-wrap{display:none;margin-bottom:14px}
  .imgstrip-hdr{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
  .imgstrip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
  .ithumb{position:relative;flex:0 0 auto;width:60px;height:60px;border-radius:11px;overflow:hidden;border:2px solid var(--line);background:var(--bg);cursor:grab;padding:0;touch-action:none}
  .ithumb.lift{opacity:.85;transform:scale(1.08);box-shadow:0 8px 20px rgba(0,0,0,.5);z-index:5;cursor:grabbing}
  .ithumb.addtile{touch-action:auto;cursor:pointer}
  .ithumb img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
  .ithumb.on{border-color:transparent;box-shadow:0 0 0 2px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
  .ithumb .ti{position:absolute;left:3px;top:3px;font-family:var(--mono);font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);border-radius:5px;padding:0 4px;line-height:15px}
  .ithumb .tx{position:absolute;right:2px;top:2px;width:17px;height:17px;line-height:16px;text-align:center;font-size:12px;color:#fff;background:rgba(0,0,0,.62);border-radius:50%;pointer-events:auto;z-index:2}
  .ithumb.addtile{display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--muted);border-style:dashed;font-weight:400}
  .ithumb.addtile:hover{border-color:var(--accent);color:var(--text)}
  .dl-zip{width:100%;margin-top:10px;background:none;border:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:590;padding:14px;border-radius:var(--r-control);cursor:pointer;display:none}
  .dl-zip.on{display:block}
  .dl-zip:hover{border-color:var(--accent);color:var(--text)}
  .dl-zip.done{border-color:transparent;background:var(--ok);color:#fff}
  .igpost{width:min(400px,92vw);margin:0 auto;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.55);color:#111;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:left}
  .igpost .ightop{display:flex;align-items:center;gap:9px;padding:10px 12px}
  .igpost .igav{width:34px;height:34px;border-radius:50%;padding:2px;background:conic-gradient(from 20deg,#f09433,#dc2743,#bc1888,#f09433);flex:0 0 auto}
  .igpost .igav>div{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;overflow:hidden}
  .igpost .igmeta{line-height:1.25;min-width:0}
  .igpost .igu{font-size:13px;font-weight:700;color:#111;display:flex;align-items:center;gap:4px}
  .igpost .igu svg{width:13px;height:13px;flex:0 0 auto}
  .igpost .igloc{font-size:11px;color:#262626}
  .igpost .igmenu{margin-left:auto;color:#111;font-weight:700;font-size:17px;letter-spacing:1px;line-height:0}
  .igpost .igimg{position:relative;width:100%;background:#000;display:flex;justify-content:center;overflow:hidden}
  .igpost .igimg .screen{border-radius:0}
  .igpost .igarrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:#111;font-size:18px;box-shadow:0 1px 5px rgba(0,0,0,.3);z-index:6}
  .igpost .igarrow.left{left:8px}.igpost .igarrow.right{right:8px}
  .igpost .igarrow:hover{color:#111;background:#fff}
  .igpost .igdots{margin:9px 0 3px}
  .igpost .igacts{display:flex;align-items:center;gap:14px;padding:9px 13px 2px}
  .igpost .igacts svg{width:24px;height:24px;display:block;cursor:pointer}
  .igpost .igacts .bm{margin-left:auto}
  .igpost .iglikes{font-size:13px;font-weight:700;color:#111;padding:3px 13px 0}
  .igpost .igcap{font-size:13px;color:#111;padding:3px 13px 0;line-height:1.4}
  .igpost .igcap b{font-weight:700}
  .igpost .igcap .tag{color:#00376b}
  .igpost .igcom{font-size:13px;color:#8e8e8e;padding:5px 13px 12px}
  /* ---- Story modu ---- */
  .igpost .igimg .storyui{position:absolute;inset:0;z-index:5;pointer-events:none;display:none;flex-direction:column;justify-content:space-between}
  .igwrap.story .igpost .igimg .storyui{display:flex}
  .igwrap.story .igpost .ightop,.igwrap.story .igpost .igdots,.igwrap.story .igpost .igacts,.igwrap.story .igpost .iglikes,.igwrap.story .igpost .igcap,.igwrap.story .igpost .igcom{display:none}
  .igwrap.noframe .igpost .ightop,.igwrap.noframe .igpost .igacts,.igwrap.noframe .igpost .iglikes,.igwrap.noframe .igpost .igcap,.igwrap.noframe .igpost .igcom,.igwrap.noframe .igpost .igimg .storyui{display:none}
  .igwrap.noframe .igpost{background:transparent;box-shadow:none}
  .igwrap.noframe .igpost .igimg::before,.igwrap.noframe .igpost .igimg::after{display:none}
  .igwrap.story .igpost{background:transparent;box-shadow:0 22px 60px rgba(0,0,0,.55);border-radius:22px}
  .igwrap.story .igpost .igimg{border-radius:22px}
  .igwrap.story .igpost .igimg::before{content:"";position:absolute;top:0;left:0;right:0;height:96px;background:linear-gradient(rgba(0,0,0,.5),transparent);z-index:4;pointer-events:none}
  .igwrap.story .igpost .igimg::after{content:"";position:absolute;bottom:0;left:0;right:0;height:110px;background:linear-gradient(transparent,rgba(0,0,0,.5));z-index:4;pointer-events:none}
  .storybars{display:flex;gap:4px;padding:11px 11px 0}
  .storybars .sb{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
  .storybars .sb>i{display:block;height:100%;width:0;background:#fff;border-radius:2px;transition:width .25s}
  .storybars .sb.fill>i{width:100%}
  .shead{display:flex;align-items:center;gap:8px;padding:9px 12px;color:#fff}
  .shead .sav{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.25);border:1.5px solid #fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
  .shead .su{font-size:13px;font-weight:700}
  .shead .stime{font-size:12px;opacity:.85}
  .shead .sx{margin-left:auto;font-size:19px;line-height:1;font-weight:300}
  .smsgbar{display:flex;align-items:center;gap:12px;padding:14px 14px}
  .smsgbar .smsg{flex:1;border:1.5px solid rgba(255,255,255,.75);border-radius:22px;padding:10px 15px;color:#fff;font-size:13px}
  .smsgbar .sic{color:#fff;font-size:19px}
  .storyui .stop{display:flex;flex-direction:column}
  .igwrap.story .igpost .igarrow{display:flex;background:rgba(0,0,0,.4);color:#fff;z-index:8}
  .igwrap.story .igpost .igarrow:hover{background:rgba(0,0,0,.6);color:#fff}
  .igwrap.story .pslide .num{display:none}
  /* --- mobilde kompakt panel --- */
  @media(max-width:640px){
    .panel{padding:11px;margin-top:14px}
    .row{gap:11px}
    .ctrl label{margin-bottom:5px;font-size:10px;letter-spacing:.06em}
    .seg{padding:2px;gap:2px}
    .seg button{padding:7px 11px;font-size:13px}
    .seg button .r{display:none}            /* alt açıklamalar gizli -> tek satır oranlar */
    .btn-ghost{padding:8px 10px;font-size:12px}
    .actions{gap:7px}
    .meta{font-size:10.5px;line-height:1.45}
    .sub{font-size:12.5px;margin-top:8px}
    .igbar{gap:8px;margin-bottom:10px}
    .igbtn{padding:7px 11px;font-size:12px}
    .imgstrip-wrap{margin-bottom:11px}
    .panel .row + .row{margin-top:11px!important}
    .cropHint{margin-top:6px;font-size:11px}
    .row{margin-top:0}
  }
  .editrow{display:block}
  @media(min-width:1080px){
    .wrap{max-width:1160px}
    .editrow{display:flex;gap:28px;align-items:flex-start}
    .editcol{flex:1 1 0;min-width:0}
    .prevcol{flex:0 0 430px;max-width:430px}
    .prevcol .igwrap{margin-top:0}
    .seo{max-width:900px}
  }
  .row.prow{flex-wrap:nowrap;align-items:flex-end;gap:10px;overflow-x:auto}
  .row.prow .ctrl{flex:0 0 auto}
  .row.prow .mini-lbl{padding-bottom:12px}
  .row.prow .btn-ghost{margin-bottom:0}
  .row.prow::-webkit-scrollbar{height:0}
  .row.prow>*{flex:0 0 auto}
  .row.prow .meta{margin-left:auto;white-space:nowrap;text-align:right;padding-bottom:0}
  .mini-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  @media(max-width:640px){ .row.prow{gap:8px} .mini-lbl{display:none} .sel{min-width:0;font-size:13px;padding:9px 28px 9px 10px;background-position:right 9px center} }
#langseg{display:none!important}

/* mobile: larger tap targets for accessibility */
@media(max-width:600px){ .seg button,.btn-ghost,.cg-auto,.cg-reset{min-height:40px} }

/* Related-tools nav: show labels for the active language (html[lang] set by applyLang) */
.related [data-lang="en"]{display:none}
html[lang="en"] .related [data-lang="tr"]{display:none}
html[lang="en"] .related [data-lang="en"]{display:inline}

  /* ============================================================
     Focus + accessibility (AGENTS.md §10)
     ============================================================ */
  :where(button,.drop,input,select,a,.logo):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
      transition-duration:.15s !important;transition-timing-function:ease !important}
    .drop:hover,.drop:active,.btn-ghost:active,.seg button:active,.modal-opts button:active{transform:none}
  }
  @media (prefers-reduced-transparency:reduce){
    .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.62)}
    .proc{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--chrome-solid)}
  }
  @media (prefers-contrast:more){
    :root,[data-theme="light"]{--muted:#3A3A3C;--line:rgba(0,0,0,.28)}
    [data-theme="dark"]{--muted:rgba(235,235,245,.86);--line:rgba(255,255,255,.34)}
  }