:root{
  --bg:#0f1115; --panel:#171a21; --card:#1c2029; --card2:#21262f; --ink:#eef1f6; --muted:#98a2b3; --line:#2a2f3a;
  --bubble-c:#232733; --box-c:#11141b; --bg-c:#0f1115;
  --accent:#d8a24a; --accent-ink:#1a1205; --green:#46c98b; --amber:#e0a93b; --danger:#e35d5d;
  --r:14px; --shadow:0 16px 50px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --fast:.16s; --med:.3s;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;color:var(--ink);
  background:radial-gradient(1200px 820px at 75% -10%,color-mix(in srgb,var(--bg-c) 62%,#33405c) 0%,var(--bg-c) 55%)}
body.no-anim *{animation:none!important;transition:none!important}
button{font:inherit;cursor:pointer;border:none;border-radius:11px;padding:10px 16px;color:var(--ink);
  transition:transform var(--fast) var(--ease),filter var(--fast),box-shadow var(--fast),background var(--fast),border-color var(--fast)}
button:active{transform:scale(.95)}
.primary{background:linear-gradient(180deg,#e6b25a,#d8a24a);color:var(--accent-ink);font-weight:700;box-shadow:0 6px 18px rgba(216,162,74,.3)}
.primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(216,162,74,.42)}
.ghost{background:transparent;border:1px solid var(--line)}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
.chip{background:var(--card2);border:1px solid var(--line)}
.chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.text-link{background:none;color:var(--muted);border:none;margin-top:18px}
.text-link:hover{color:var(--accent)}
.muted{color:var(--muted);font-size:13px}
.hidden{display:none!important}
hr{border:none;border-top:1px solid var(--line);margin:18px 0}

/* corner bubbles (settings / close) */
.corner-bubble{position:fixed;top:18px;left:18px;width:50px;height:50px;border-radius:50%;z-index:80;font-size:20px;
  background:rgba(28,32,41,.85);border:1px solid var(--line);backdrop-filter:blur(8px);box-shadow:var(--shadow);
  display:grid;place-items:center;animation:floaty 5s ease-in-out infinite}
.corner-bubble:hover{transform:translateY(-2px) scale(1.06);border-color:var(--accent);color:var(--accent)}
.corner-bubble.close{left:auto;right:18px;animation-delay:.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* alive corner-bubble icons */
.corner-bubble .cico{display:block;overflow:visible}
.corner-bubble .gear-rot{transform-box:fill-box;transform-origin:center;animation:gearspin 7s linear infinite}
@keyframes gearspin{to{transform:rotate(360deg)}}
.corner-bubble .folder-lid{transform-box:fill-box;transform-origin:bottom;animation:folderpeek 3.4s ease-in-out infinite}
@keyframes folderpeek{0%,68%,100%{transform:translateY(0) scaleY(1)}82%{transform:translateY(-2px) scaleY(.9)}}
.cico-draw .dpen{transform-box:fill-box;transform-origin:center;animation:dpenmove 2.2s ease-in-out infinite}
@keyframes dpenmove{0%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}100%{transform:translate(-3px,2px)}}
.cico-draw .dwave{animation:dwavedraw 2.2s ease-in-out infinite}
@keyframes dwavedraw{0%{stroke-dashoffset:40}50%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
body.no-anim .gear-rot,body.no-anim .folder-lid,body.no-anim .dpen,body.no-anim .dwave{animation:none}

/* STAGE */
#stage{height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.dropzone{position:relative;width:min(620px,92%);text-align:center;padding:64px 36px;border:2px dashed var(--line);
  border-radius:28px;background:rgba(23,26,33,.5);transition:.25s var(--ease)}
.dropzone.drag{border-color:var(--accent);transform:scale(1.02);background:rgba(216,162,74,.07)}
.dz-ring{position:absolute;inset:0;border-radius:28px;pointer-events:none;box-shadow:0 0 0 0 rgba(216,162,74,.4);animation:ring 3.2s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(216,162,74,.25)}70%{box-shadow:0 0 0 22px rgba(216,162,74,0)}100%{box-shadow:0 0 0 0 rgba(216,162,74,0)}}
.dz-icon{font-size:58px;animation:floaty 4s ease-in-out infinite}
.dropzone h1{margin:14px 0 6px;font-size:26px}
.dropzone p{color:var(--muted);margin:0}

/* file tile */
.file-stage{display:flex;flex-direction:column;align-items:center}
.file-tile{width:230px;padding:30px 22px;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--box-c) 78%,#2b3340),var(--box-c));
  border:1px solid var(--line);box-shadow:var(--shadow);text-align:center;cursor:pointer;user-select:none;
  transition:transform var(--med) var(--spring),filter var(--med),box-shadow var(--med);animation:tilein .5s var(--spring) both}
@keyframes tilein{from{opacity:0;transform:scale(.6) translateY(20px)}to{opacity:1;transform:none}}
.file-tile:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 22px 60px rgba(0,0,0,.5)}
.ft-icon{font-size:62px;line-height:1}
.ft-thumb{width:120px;height:120px;object-fit:cover;border-radius:12px;border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.45);display:block;margin:0 auto}
.ft-name{margin-top:8px;font-weight:700;word-break:break-word}
.ft-hint{margin-top:10px;font-size:12px;color:var(--muted)}
.file-tile.holding{transform:scale(.94);filter:brightness(.8);transition:transform .32s var(--ease),filter .32s var(--ease)}
body.menu-open #file-tile{filter:blur(4px) brightness(.5);transform:scale(.9)}
body.menu-open .corner-bubble,body.menu-open #new-file{opacity:.25;pointer-events:none}

/* ---- water-splash import animation: file drops in, splashes, doc surfaces in 3D ---- */
#stage{perspective:1200px}                       /* 3D depth for the tile emerge */
.splash{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%)}
.splash .core{position:absolute;left:0;top:0;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:radial-gradient(circle at 50% 36%,#eaf6ff,color-mix(in srgb,var(--accent) 58%,#7fc4ff));
  box-shadow:0 0 26px color-mix(in srgb,var(--accent) 55%,#7fc4ff);animation:sp-core .5s var(--ease) forwards}
.splash .ring{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:2.5px solid color-mix(in srgb,var(--accent) 72%,#cdefff);opacity:0;animation:sp-ring .95s var(--ease) forwards}
.splash .ring.r2{width:34px;animation-duration:1.15s;animation-delay:.07s;border-color:color-mix(in srgb,var(--accent) 42%,#dff1ff)}
.splash .ring.r3{animation-duration:1.35s;animation-delay:.14s;border-color:rgba(191,227,255,.45)}
.splash .drop{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#f3fbff,color-mix(in srgb,var(--accent) 52%,#7fc4ff));
  opacity:0;animation:sp-drop .8s var(--ease) forwards}
@keyframes sp-ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(6);opacity:0}}
@keyframes sp-core{0%{transform:scale(.15);opacity:.95}55%{transform:scale(1.2);opacity:.65}100%{transform:scale(.08);opacity:0}}
@keyframes sp-drop{0%{transform:translate(0,0) scale(1);opacity:1}
  18%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.35);opacity:0}}
.file-tile.emerge{animation:tile-emerge .8s var(--spring) both}
@keyframes tile-emerge{
  0%{opacity:0;transform:perspective(900px) rotateX(60deg) translateY(70px) scale(.5);filter:blur(7px)}
  55%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:perspective(900px) rotateX(0) translateY(0) scale(1)}}

/* scrim */
.scrim{position:fixed;inset:0;z-index:55;background:rgba(8,10,14,.45);backdrop-filter:blur(4px);animation:fadein var(--med)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* radial bubble menu */
.bubble-menu{position:fixed;left:0;top:0;width:0;height:0;z-index:60}
/* .bubble = STATIC clickable positioner — never moves (can't dodge the cursor). 3 layers:
   .bubble (position) > .float (gentle float) > .ball (bubbly hover/press/pop) > .bubble-inner (icon) */
/* hit box (150px) is bigger than the circle (112px, max ~123px hovered) so the
   visible circle is ALWAYS inside the clickable area — pressing can't make it dodge. */
/* position set in JS via plain left/top px (no calc) — only scale is animated, so
   the bubble never translates; transform-origin center keeps the click box fixed. */
.bubble{position:absolute;width:150px;height:150px;display:grid;place-items:center;border:none;padding:0;background:none;cursor:pointer;
  animation:popin .4s var(--spring) backwards;will-change:transform}
@keyframes popin{0%{opacity:0;transform:scale(.2)}100%{opacity:1;transform:scale(1)}}
.float{display:block;width:112px;height:112px;animation:bob 3s ease-in-out infinite}
.bubble.b1 .float{animation-delay:.5s}
.bubble.b2 .float{animation-delay:1s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.ball{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--bubble-c) 72%,#fff),var(--bubble-c));
  box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 2px 2px rgba(255,255,255,.14),inset 0 -6px 12px rgba(0,0,0,.25);
  transition:transform .26s var(--spring),box-shadow .2s,filter .15s}
.bubble:hover .ball{transform:scale(1.1);filter:brightness(1.18);box-shadow:0 22px 50px rgba(0,0,0,.6),inset 0 3px 3px rgba(255,255,255,.22),inset 0 -6px 14px rgba(0,0,0,.28)}
.bubble:active .ball{transform:scale(.94);transition:transform .07s ease}
.bubble:hover .bubble-inner{transform:scale(1.06)}
.bubble-inner{display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform var(--fast);pointer-events:none}
.b-ico{font-size:32px;display:grid;place-items:center;animation:ico3d 6s ease-in-out infinite;will-change:transform}
.b-ico .ico{display:block;overflow:visible}
/* gentle continuous 3D tilt so the icon has depth + life */
@keyframes ico3d{0%,100%{transform:perspective(240px) rotateY(-13deg) rotateX(6deg)}50%{transform:perspective(240px) rotateY(13deg) rotateX(-5deg)}}
/* View — the eye blinks and glances */
.ico-eye .eye-blink{transform-box:fill-box;transform-origin:center;animation:eyeblink 3.8s infinite}
@keyframes eyeblink{0%,88%,100%{transform:scaleY(1)}92%{transform:scaleY(.07)}95%{transform:scaleY(1)}}
.ico-eye .eye-ball{transform-box:fill-box;transform-origin:center;animation:eyelook 5s ease-in-out infinite}
@keyframes eyelook{0%,100%{transform:translateX(0)}30%{transform:translateX(2px)}65%{transform:translateX(-2px)}}
/* Fill & Sign — the pen writes the line, over and over */
.ico-pen .pen-hand{animation:penwrite 2s ease-in-out infinite}
@keyframes penwrite{0%{transform:translate(-4px,2px)}45%,55%{transform:translate(5px,-2px)}100%{transform:translate(-4px,2px)}}
.ico-pen .pen-ink{animation:penink 2s ease-in-out infinite}
@keyframes penink{0%{stroke-dashoffset:44}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:44}}
/* Convert — the arrows spin, then pause */
.ico-conv .conv-spin{transform-box:fill-box;transform-origin:center;animation:convspin 2.6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes convspin{0%{transform:rotate(0)}62%,100%{transform:rotate(360deg)}}
.b-lbl{font-size:12px;color:var(--ink);font-weight:600}
.bubble.popping{z-index:3}
.bubble.popping .ball{animation:popball .3s var(--ease) forwards}
@keyframes popball{0%{transform:scale(.9)}35%{transform:scale(1.38)}100%{transform:scale(1.9);opacity:0}}
.bubble.fading .ball{animation:fadeball .26s var(--ease) forwards}
@keyframes fadeball{to{opacity:0;transform:scale(.5)}}
.ripple{position:absolute;width:150px;height:150px;border-radius:50%;border:3px solid var(--accent);
  animation:ripple .55s var(--ease) forwards;pointer-events:none}
@keyframes ripple{from{opacity:.7;scale:.5}to{opacity:0;scale:2.2}}

/* ACTION VIEWS */
.act{position:fixed;inset:0;z-index:40;overflow:auto;background:radial-gradient(1200px 820px at 75% -10%,color-mix(in srgb,var(--bg-c) 62%,#33405c) 0%,var(--bg-c) 55%);
  padding:74px 28px 40px;animation:actin .35s var(--ease)}
@keyframes actin{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.act-bar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 80px;background:linear-gradient(180deg,rgba(15,17,21,.96),rgba(15,17,21,.7));backdrop-filter:blur(8px);z-index:5}
.act-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.recognized{color:var(--green);font-size:14px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%}
.recognized.guess{color:var(--muted)}
.act-bar{flex-wrap:nowrap}
/* instruction banner: bottom-center so it never covers the top buttons; smooth fade+rise */
.hint{position:fixed;bottom:46px;left:50%;transform:translateX(-50%) translateY(14px) scale(.96);z-index:55;pointer-events:none;
  font-size:14px;color:var(--accent-ink);font-weight:700;background:var(--accent);padding:10px 22px;border-radius:999px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);white-space:nowrap;opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hint.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

/* date picker popover */
.date-picker{position:fixed;bottom:34px;left:50%;transform:translateX(-50%);z-index:70;
  background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;align-items:center;animation:dpin .28s var(--spring)}
@keyframes dpin{from{opacity:0;transform:translateX(-50%) translateY(20px) scale(.94)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.dp-title{font-size:13px;color:var(--muted);font-weight:600}
.dp-selects{display:flex;gap:8px}
.dp-selects select{background:#11141b;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:15px;cursor:pointer}
.dp-selects select:focus{outline:none;border-color:var(--accent)}
.dp-chip{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(180deg,#e6b25a,#d8a24a);color:var(--accent-ink);
  font-weight:800;padding:11px 20px;border-radius:999px;cursor:grab;box-shadow:0 8px 22px rgba(216,162,74,.45);user-select:none;font-size:16px;
  transition:transform var(--fast) var(--ease)}
.dp-chip:hover{transform:translateY(-2px)}
.dp-chip:active{cursor:grabbing;transform:scale(.97)}
.dp-cal{font-size:18px}
.dp-note{font-size:12px;color:var(--accent);font-weight:600}
.date-ghost{position:fixed;z-index:130;background:linear-gradient(180deg,#e6b25a,#d8a24a);color:var(--accent-ink);font-weight:800;
  padding:9px 16px;border-radius:999px;pointer-events:none;box-shadow:0 12px 28px rgba(0,0,0,.5);font-size:15px;transform:translate(-50%,-50%)}
.date-spot{position:absolute;width:64px;height:18px;border-radius:6px;border:2px dashed var(--accent);background:rgba(216,162,74,.22);
  transform:translate(-50%,-50%);pointer-events:none;animation:spotpulse 1.3s ease-in-out infinite;z-index:4}
@keyframes spotpulse{0%,100%{box-shadow:0 0 0 0 rgba(216,162,74,.55)}50%{box-shadow:0 0 0 10px rgba(216,162,74,0)}}
.date-spot-label{position:absolute;bottom:135%;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--accent);
  color:var(--accent-ink);font-size:11px;font-weight:800;padding:3px 9px;border-radius:7px;box-shadow:0 5px 14px rgba(0,0,0,.45)}
.datestamp{cursor:pointer;border-bottom:1px dotted rgba(216,162,74,.6)}
.pages{display:flex;flex-direction:column;gap:22px;align-items:safe center;padding:20px 0 40px}
.scroll-open{transform-origin:top center;animation:unfurl .65s var(--ease) both}
@keyframes unfurl{0%{opacity:0;transform:perspective(1600px) rotateX(-58deg) scaleY(.6) translateY(-20px);filter:blur(3px)}
  60%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}}
.pagewrap{position:relative;box-shadow:var(--shadow);border-radius:6px;overflow:hidden;background:#fff;animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pagewrap img{display:block;width:100%;height:auto}
.pagewrap.img-view{max-width:820px;width:96%}
#act-view #viewer .img-view{cursor:grab}
#viewer.grabbing,#viewer.grabbing .img-view,#viewer.grabbing img{cursor:grabbing}
.view-toolbar{position:fixed;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;z-index:6;
  background:rgba(15,17,21,.92);border:1px solid var(--line);border-radius:13px;padding:8px 12px;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.view-toolbar .chip{padding:8px 12px;font-weight:700;line-height:1}
.view-toolbar #zoom-label{min-width:50px;text-align:center;font-weight:700;font-size:14px;color:var(--muted)}
.view-toolbar .primary{padding:8px 16px;margin-left:6px}
/* image editor (pictures) */
.imgedit-toolbar{position:fixed;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;z-index:6;flex-wrap:wrap;justify-content:center;max-width:94vw;
  background:rgba(15,17,21,.92);border:1px solid var(--line);border-radius:13px;padding:8px 12px;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.imgedit-toolbar .chip{padding:8px 12px;font-weight:600;line-height:1}
.imgedit-toolbar select{padding:7px 8px;border-radius:9px;border:1px solid var(--line);background:var(--box-c);color:var(--ink);font-size:13px;font-weight:600}
.imgedit-toolbar .chip.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.imgedit-toolbar .tool.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.imgedit-toolbar #ie-zoomlabel{min-width:46px;text-align:center;font-weight:700;font-size:13px;color:var(--muted)}
.imgedit-toolbar #ie-size{width:100px}
.ie-palette{display:flex;gap:5px;flex-wrap:wrap;max-width:316px;justify-content:center}
.ie-palette .swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:transform .12s var(--spring)}
.ie-palette .swatch:hover{transform:scale(1.2)}
.ie-palette .swatch.sel{border-color:var(--accent);transform:scale(1.12)}
.ie-stage{position:fixed;inset:124px 0 0 0;overflow:auto;display:flex;align-items:flex-start;justify-content:safe center;padding:18px 24px 24px}
#ie-canvas{background:#fff;box-shadow:var(--shadow);border-radius:4px;touch-action:none;cursor:crosshair}
#ie-overlay{position:absolute;z-index:4;pointer-events:none;border-radius:4px}
/* tools drawer edge-strip (mobile only; desktop keeps the top toolbar) */
.tb-tab{display:none}
#tb-scrim{display:none}
@media (max-width:680px){
  /* toolbar becomes a left slide-in drawer */
  .imgedit-toolbar{top:0;left:0;bottom:0;transform:translateX(-102%);
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;
    width:auto;max-width:82vw;max-height:100vh;overflow-y:auto;overflow-x:hidden;z-index:20;
    border-radius:0 16px 16px 0;padding:64px 12px 18px;gap:9px;
    transition:transform .28s cubic-bezier(.2,.85,.25,1)}
  body.tb-open .imgedit-toolbar{transform:translateX(0)}
  .imgedit-toolbar .chip,.imgedit-toolbar select,.imgedit-toolbar .primary{width:100%}
  .imgedit-toolbar #ie-size{width:100%}
  .ie-palette{max-width:none}
  /* the always-visible tappable edge strip */
  .tb-tab{display:flex;position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:21;
    width:34px;height:96px;align-items:center;justify-content:center;
    background:var(--accent);color:var(--accent-ink);border:none;border-radius:0 14px 14px 0;
    font-size:22px;font-weight:800;box-shadow:var(--shadow);cursor:pointer;padding:0;
    transition:transform .28s cubic-bezier(.2,.85,.25,1)}
  .tb-tab::after{content:"\203A"}                 /* › open me */
  body.tb-open .tb-tab{transform:translateY(-50%) translateX(82vw)}
  body.tb-open .tb-tab::after{content:"\2039"}     /* ‹ close */
  /* scrim behind the drawer */
  #tb-scrim{display:none;position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.4)}
  body.tb-open #tb-scrim{display:block}
  /* full-height canvas (toolbar no longer occupies the top) */
  .ie-stage{inset:60px 0 0 0}
}
/* layers panel */
.ie-layers{position:fixed;top:124px;right:14px;width:248px;max-height:calc(100vh - 150px);z-index:7;background:var(--box-c,#161a22);border:1px solid var(--line,#2a3140);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.ie-layers-head{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-bottom:1px solid var(--line,#2a3140);font-weight:700;font-size:13px}
.ie-layerlist{overflow:auto;padding:7px;display:flex;flex-direction:column;gap:6px}
.ie-lrow{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;padding:7px 8px;border-radius:9px;border:1px solid transparent;background:rgba(255,255,255,.03);cursor:pointer}
.ie-lrow.active{border-color:var(--accent);background:rgba(255,255,255,.07)}
.ie-lname{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ie-leye{width:26px;height:26px;border:none;border-radius:7px;background:rgba(255,255,255,.06);color:var(--ink,#e9edf5);cursor:pointer;font-size:13px;opacity:.5}
.ie-leye.on{opacity:1}
.ie-lop{flex-basis:100%;width:100%;margin:2px 0 0}
.ie-lbtn{width:24px;height:24px;border:none;border-radius:6px;background:rgba(255,255,255,.06);color:var(--ink,#e9edf5);cursor:pointer;font-size:13px;line-height:1}
.ie-lbtn:hover{background:rgba(255,255,255,.14)}
.ie-ldel:hover{background:#b3261e;color:#fff}
/* live text objects (draggable / 8-way resizable / transparent-by-default) */
.ie-tb-wrap{position:absolute;z-index:5}
#ie-stage.draw-mode .ie-tb-wrap{pointer-events:none}
.ie-tb{position:absolute;left:0;top:0;min-width:18px;min-height:1em;padding:3px 7px;outline:none;background:transparent;border-radius:5px;font-family:Arial,sans-serif;white-space:pre;line-height:1.28}
.ie-tb:empty:before{content:"Type…";opacity:.45}
.ie-tb-wrap:not(.editing) .ie-tb{cursor:move}
.ie-tb-wrap.editing .ie-tb{cursor:text}
.ie-tb-wrap.active .ie-tb{outline:1px dashed var(--accent);outline-offset:3px;animation:tbglow 1.8s ease-in-out infinite}
.ie-tb-wrap.dragging .ie-tb{animation:none}
@keyframes tbglow{0%,100%{box-shadow:0 0 0 0 rgba(216,162,74,0)}50%{box-shadow:0 0 11px 1px rgba(216,162,74,.5)}}
/* game-style entrance pop */
.ie-tb-wrap.pop{animation:tbpop .34s var(--spring) both}
@keyframes tbpop{0%{transform:scale(.55);opacity:0}62%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}
/* handles (hidden until active/hover), springy */
.ie-h{position:absolute;display:none;place-items:center;user-select:none;cursor:pointer;transition:transform .14s var(--spring),box-shadow .14s}
.ie-tb-wrap.active .ie-h,.ie-tb-wrap:hover .ie-h{display:grid;animation:hpop .3s var(--spring) backwards}
@keyframes hpop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
.ie-h:hover{transform:scale(1.45)!important}
.ie-h:active{transform:scale(.85)!important}
/* 8 resize handles */
.ie-rh{width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.45)}
.ie-rh-n{top:-7px;left:50%;margin-left:-7px;cursor:ns-resize}
.ie-rh-s{bottom:-7px;left:50%;margin-left:-7px;cursor:ns-resize}
.ie-rh-e{right:-7px;top:50%;margin-top:-7px;cursor:ew-resize}
.ie-rh-w{left:-7px;top:50%;margin-top:-7px;cursor:ew-resize}
.ie-rh-ne{top:-7px;right:-7px;cursor:nesw-resize}
.ie-rh-nw{top:-7px;left:-7px;cursor:nwse-resize}
.ie-rh-se{bottom:-7px;right:-7px;cursor:nwse-resize}
.ie-rh-sw{bottom:-7px;left:-7px;cursor:nesw-resize}
/* pen (edit) + delete, floating above the box */
.ie-h-pen,.ie-h-del{width:25px;height:25px;border-radius:50%;font-size:13px;font-weight:800;top:-36px;box-shadow:0 3px 9px rgba(0,0,0,.45)}
.ie-h-pen{left:-7px;background:var(--accent);color:#1a1205}
.ie-h-del{right:-7px;background:#e35d5d;color:#fff}
.ie-h-pen:hover{box-shadow:0 0 13px rgba(216,162,74,.75),0 3px 9px rgba(0,0,0,.45)}
/* text edit panel (opened by the pen) */
.ie-textpanel{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;z-index:8;flex-wrap:wrap;justify-content:center;max-width:94vw;
  background:rgba(15,17,21,.96);border:1px solid var(--line);border-radius:13px;padding:8px 12px;backdrop-filter:blur(8px);box-shadow:var(--shadow);animation:pop2 .25s var(--spring)}
.ie-textpanel select{padding:7px 8px;border-radius:9px;border:1px solid var(--line);background:var(--box-c);color:var(--ink);font-size:13px;max-width:128px}
.ie-textpanel .chip{padding:7px 10px;min-width:32px;line-height:1}
.ie-textpanel .chip.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.ie-textpanel .tp-align svg{display:block}
.tp-sep{width:1px;height:22px;background:var(--line);margin:0 3px}
/* animated tool icons (Draw / Text / Pick) */
.tico{vertical-align:-4px;margin-right:5px;overflow:visible}
.tico-pen .tpen{transform-box:fill-box;transform-origin:75% 75%;animation:twiggle 1.5s ease-in-out infinite}
@keyframes twiggle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.tico-txt .tcaret{animation:tblink 1.1s steps(1) infinite}
@keyframes tblink{0%,49%{opacity:1}50%,100%{opacity:0}}
.tico-pick .tdrop{transform-box:fill-box;transform-origin:center;animation:tdrip 1.9s ease-in infinite}
@keyframes tdrip{0%,55%{transform:translateY(0);opacity:0}70%{opacity:1}100%{transform:translateY(6px);opacity:0}}
body.no-anim .tpen,body.no-anim .tcaret,body.no-anim .tdrop{animation:none}
.fieldbox{position:absolute;border:1px solid transparent;background:rgba(216,162,74,.06);color:#10131a;
  font-family:Arial,Helvetica,sans-serif;padding:0 3px;border-radius:2px;outline:none;line-height:1;animation:fadein var(--med) both}
.fieldbox.combcell{text-align:center;padding:0;font-weight:600}
.fieldbox:hover{background:rgba(216,162,74,.18)}
.fieldbox:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 2px rgba(216,162,74,.35);z-index:2}
.checkbox{position:absolute;display:grid;place-items:center;cursor:pointer;font-weight:800;color:#101317;
  border:1px solid rgba(216,162,74,.7);background:rgba(216,162,74,.12);border-radius:3px}
.checkbox.on{background:var(--accent)}
.stamp{position:absolute;cursor:move;border:1px dashed transparent;border-radius:3px}
.stamp:hover{border-color:var(--accent)}
.stamp img{display:block;width:100%;height:100%}
.stamp .txt{white-space:nowrap;color:#101317;font-size:13px;padding:0 2px}
.stamp .del{position:absolute;top:-9px;right:-9px;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-size:12px;line-height:18px;text-align:center;display:none}
.stamp:hover .del{display:block}
.placing{cursor:crosshair!important}
.convert-wrap{max-width:560px;margin:40px auto;text-align:center}
.convert-wrap h2{margin:10px 0}
.save-result{font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:18px;word-break:break-all}
.save-result .ok{color:var(--green);font-weight:700}
.save-result a{color:var(--accent);cursor:pointer}

/* SETTINGS panel */
.panel{position:fixed;inset:0;z-index:90;background:rgba(8,10,14,.55);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto;animation:fadein var(--fast)}
.panel-card{position:relative;width:min(640px,96vw);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow);animation:pop2 var(--med) var(--spring)}
@keyframes pop2{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.panel-card h2{margin:0 0 4px}
.panel-card .close{position:absolute;top:14px;right:14px;animation:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.grid2 .span2{grid-column:1 / -1}
/* settings tabs */
.tabbar{display:inline-flex;background:var(--box-c);border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px}
.tab{background:transparent;border:none;padding:7px 16px;border-radius:8px;color:var(--muted);font-weight:600;font-size:14px}
.tab.active{background:var(--accent);color:var(--accent-ink)}
.tab:hover:not(.active){color:var(--ink)}
/* doc-type chooser */
.doctype-card{width:min(520px,94vw);text-align:center}
.doctype-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.doctype-choice{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 14px;border-radius:16px;
  background:var(--card2);border:1px solid var(--line);transition:transform var(--fast) var(--spring),border-color var(--fast),box-shadow var(--fast)}
.doctype-choice:hover{border-color:var(--accent);transform:translateY(-3px) scale(1.03);box-shadow:0 14px 36px rgba(0,0,0,.4)}
.dt-ico{font-size:40px}
.dt-lbl{font-weight:700;font-size:17px;color:var(--ink)}
.dt-sub{font-size:12px;color:var(--muted)}
/* convert hub */
.conv-opts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0}
.conv-opts .chip{padding:12px 18px;font-weight:600}
label{display:block;font-size:13px;color:var(--muted)}
input{width:100%;margin-top:6px;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--box-c);color:var(--ink);font-size:15px}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(216,162,74,.25)}
.row-end{display:flex;justify-content:flex-end;margin-top:16px}
.sig-row{display:flex;gap:16px;align-items:center}
.sig-preview{width:240px;height:84px;border-radius:10px;border:1px dashed var(--line);background:#fff;display:grid;place-items:center;color:#888;font-size:13px}
.sig-preview img{max-width:90%;max-height:78%}
.sig-row .col{display:flex;flex-direction:column;gap:8px}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.swatches{display:flex;gap:8px}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform var(--fast)}
.swatch:hover{transform:scale(1.15)}.swatch.sel{border-color:#fff}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--green);background:rgba(70,201,139,.1);border:1px solid rgba(70,201,139,.3);padding:7px 11px;border-radius:11px}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.switch{position:relative;display:inline-block;width:46px;height:26px}
.switch input{display:none}
.slider{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:background var(--fast)}
.slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform var(--med) var(--ease)}
.switch input:checked+.slider{background:var(--accent)}
.switch input:checked+.slider::before{transform:translateX(20px)}

/* modal / toast / spinner */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:95;animation:fadein var(--fast)}
.modal-card{width:min(620px,94vw);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);animation:pop2 var(--med) var(--spring)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.sigpad{width:100%;background:#fff;border-radius:10px;margin-top:12px;touch-action:none;cursor:crosshair}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--card2);border:1px solid var(--line);padding:13px 20px;border-radius:12px;box-shadow:var(--shadow);z-index:100;opacity:0;transition:opacity var(--med),transform var(--med) var(--ease)}
.toast.show{opacity:1;transform:translateX(-50%)}
.spin-overlay{position:fixed;inset:0;background:rgba(10,12,16,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:110;backdrop-filter:blur(2px);animation:fadein var(--fast)}
.spinner{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#spin-label{color:var(--muted)}
.primary.big{width:100%;padding:14px;font-size:16px}
.section-head{display:flex;align-items:center;gap:10px;margin-top:6px}
.section-head h3{margin:0}
.mini-bubble{width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--line);font-size:15px;display:grid;place-items:center;padding:0}
.mini-bubble:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.08)}
.info-fields{transition:opacity var(--med),filter var(--med)}
.info-fields.locked{opacity:.55;filter:saturate(.6);pointer-events:none}
.info-fields.locked input{border-color:transparent;background:rgba(255,255,255,.03)}
.picker{display:flex;align-items:center;gap:10px}
.cpick{width:38px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer;margin:0}
.cpick::-webkit-color-swatch-wrapper{padding:2px}.cpick::-webkit-color-swatch{border:none;border-radius:6px}
.settings-save-row{margin-top:22px}
.files-list{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.file-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card2);animation:rise .25s var(--ease) both}
.file-row:hover{border-color:var(--accent)}
.file-row .fi{font-size:24px}
.file-row .fmeta{flex:1;min-width:0}
.file-row .fname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-row .sm{padding:6px 12px;font-size:13px}
.file-row .del{padding:6px 10px;color:var(--muted)}
.file-row .del:hover{border-color:var(--danger);color:var(--danger)}
.act.closing{animation:actout .24s var(--ease) forwards}
/* Free Draw studio: sweep in from the side + bounce on landing */
#act-imgedit.sweep-in{animation:studio-sweep .62s cubic-bezier(.2,.85,.25,1) both}
@keyframes studio-sweep{0%{opacity:0;transform:translateX(-100%)}55%{opacity:1;transform:translateX(3.5%)}73%{transform:translateX(-1.5%)}88%{transform:translateX(.6%)}100%{transform:translateX(0)}}
body.no-anim #act-imgedit.sweep-in{animation:none}
@keyframes actout{to{opacity:0;transform:scale(.985)}}
#ver{position:fixed;right:12px;bottom:9px;font-size:12px;color:#9aa6bd;z-index:200;pointer-events:none;font-weight:700;letter-spacing:.3px;text-shadow:0 1px 3px #000}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}