*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;
    background:#1a1a1a;color:#ddd;font-family:system-ui,sans-serif;touch-action:none;
    -webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:text;user-select:text}

#bar{
    position:fixed;inset:0 0 auto 0;z-index:9000;height:54px;
    background:rgba(15,15,15,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid #2a2a2a;
    display:flex;align-items:center;gap:8px;padding:0 12px;
    transition:transform .22s ease;
}
body.tools-chrome-hidden #bar{
    transform:translateY(-100%);
    pointer-events:none;
}
#logo{font-size:13px;font-weight:700;color:#555;letter-spacing:.1em;user-select:none;margin-right:2px}
#share-view-badge{
    display:flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;
    border:1px solid #284260;background:#132031;color:#9fd5ff;font:600 11px/1 system-ui,sans-serif;
    letter-spacing:.04em;white-space:nowrap;
}
#share-active-badge{
    display:flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;
    border:1px solid #24553f;background:#11241c;color:#97e1bc;font:600 11px/1 system-ui,sans-serif;
    letter-spacing:.04em;white-space:nowrap;
}
#user-badge{
    display:flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;
    border:1px solid #2e3640;background:#171b22;color:#9fb7d9;font:600 11px/1 system-ui,sans-serif;
    text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
}
#account-menu.hidden,#account-dropdown.hidden,#auth-screen.hidden,#auth-register.hidden,#invite-user-btn.hidden,#share-modal.hidden,#board-form-modal.hidden,#board-delete-modal.hidden,#share-view-state.hidden,#share-view-badge.hidden,#share-active-badge.hidden{display:none}
#account-menu{position:relative;/* margin-left:auto */}
#account-menu-btn{width:auto;min-width:40px;padding:0 12px;gap:8px}
#account-menu-btn-label{
    max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:#d7dee6;font:600 12px/1 system-ui,sans-serif;
}
#account-dropdown{
    position:absolute;top:44px;right:0;min-width:220px;padding:10px;border-radius:14px;
    border:1px solid #2b313a;background:rgba(13,17,23,.98);
    box-shadow:0 18px 48px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:8px;
}
.menu-item{
    width:100%;min-height:38px;padding:0 12px;border-radius:10px;border:1px solid #323a45;
    background:#171b22;color:#d7dee6;font:600 12px/1 system-ui,sans-serif;cursor:pointer;text-align:left;
}
.menu-item:active{background:#232932}
#logout-btn{color:#d7dee6}
#delete-account-btn{border-color:#5f252b;color:#f3b4be;background:#221417}
#delete-account-btn:active{background:#3a1414}
#bar-separator{display:none;width:1px;height:24px;background:#303844;opacity:.95;flex-shrink:0}
#ws-select{
    flex:1;max-width:200px;
    background:#222;color:#ddd;border:1px solid #383838;
    padding:0 26px 0 10px;height:36px;border-radius:7px;font-size:14px;cursor:pointer;
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 8px center;
}
#ws-select{display:none}
#board-switcher-btn{
    width:auto;min-width:156px;max-width:220px;padding:0 11px;gap:9px;justify-content:flex-start;
}
#board-switcher-label{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:#e2e8f0;font:700 13px/1 system-ui,sans-serif;
}
#board-switcher-count{
    margin-left:auto;padding:3px 7px;border-radius:999px;background:#303844;color:#9fb7d9;
    font:700 10px/1 system-ui,sans-serif;
}
#boards-panel.hidden,#boards-panel-backdrop.hidden{display:none}
#boards-panel-backdrop{
    position:fixed;inset:54px 0 0 0;z-index:8550;background:transparent;pointer-events:none;
}
#boards-panel{
    position:fixed;top:54px;left:0;bottom:0;width:min(380px,calc(100vw - 18px));z-index:9999;
    display:flex;flex-direction:column;border-right:1px solid #2b313a;
    background:rgba(12,15,20,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:18px 0 54px rgba(0,0,0,.38);
}
#boards-panel-head{
    display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid #252b34;
}
#boards-panel-title{color:#eef2f7;font:800 14px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em}
#boards-new-btn{margin-left:2px}
#boards-panel-close{margin-left:auto}
#boards-search{
    margin:12px 14px 10px;width:calc(100% - 28px);height:38px;border-radius:8px;
    border:1px solid #323a45;background:#171b22;color:#eef2f7;padding:0 11px;
    font:600 13px/1 system-ui,sans-serif;outline:none;
}
#boards-search:focus{border-color:#4a9eff;box-shadow:0 0 0 3px rgba(74,158,255,.14)}
#boards-list{
    flex:1;overflow:auto;padding:0 10px 14px;display:flex;flex-direction:column;gap:9px;
    position:relative;
}
.board-card{
    position:relative;
    width:100%;min-height:96px;border:1px solid #2b313a;border-radius:8px;
    background:#151a21;color:#d7dee6;display:grid;grid-template-columns:120px minmax(0,1fr) 36px;
    gap:11px;padding:8px 8px 8px 26px;cursor:pointer;text-align:left;transition:border-color .14s,background .14s,transform .14s;
}
.board-card:hover,.board-card.drop-target{border-color:#4a9eff;background:#182231}
.board-card:focus-visible{outline:2px solid #4a9eff;outline-offset:2px}
.board-card.active{border-color:#ffd166;background:#211f19}
.board-card.drop-target{
    transform:translateX(3px);box-shadow:0 0 0 2px rgba(74,158,255,.28),0 14px 34px rgba(74,158,255,.16);
}
.board-card.drop-target::after{
    content:"Soltar aqui";position:absolute;right:48px;bottom:10px;
    padding:5px 8px;border-radius:999px;background:#1f5ea9;color:#f3f6fa;
    font:800 10px/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;
}
.board-card-preview{
    width:120px;height:74px;border-radius:6px;background:#101318;border:1px solid #27303b;
    object-fit:contain;display:block;
}
.board-card-meta{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px}
.board-card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eef2f7;font:800 13px/1.1 system-ui,sans-serif}
.board-card-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8491a1;font:600 11px/1 system-ui,sans-serif}
.board-card-count{color:#9fd5ff;font:700 11px/1 system-ui,sans-serif}
.board-card-actions{display:flex;flex-direction:column;gap:0px;align-self:center}
.board-card-action{
    width:30px;height:26px;border-radius:7px;border:none;background:transparent;
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.board-card-action:hover{
    background:#ffffff12;
}
.board-card-action:active{background:#232932}
.board-card-action[disabled]{opacity:.32;cursor:not-allowed}
.board-card-action.share svg *{stroke:#9fd5ff}
.board-card-action.rename svg *{stroke:#8ccf99}
.board-card-action.delete{border-color:#4a1e1e}
.board-card-action.delete svg *{stroke:#f87171}
.board-card-empty{padding:18px;color:#8491a1;font:600 13px/1.4 system-ui,sans-serif;text-align:center}
.board-card-drag-handle{
    position:absolute;left:0;top:0;bottom:0;width:24px;
    display:flex;align-items:center;justify-content:center;
    cursor:grab;opacity:0;transition:opacity .14s;border-radius:8px 0 0 8px;
    touch-action:none;
}
.board-card:hover .board-card-drag-handle{opacity:.65}
.board-card-drag-handle:active{cursor:grabbing}
.board-card-drag-handle svg *{fill:#6a7a8c}
.board-card.reorder-dragging{opacity:.28;pointer-events:none;cursor:default}
.board-card-reorder-ghost{
    position:fixed;z-index:9100;pointer-events:none;opacity:.93;
    border-radius:8px;background:#182231;border:2px solid #4a9eff;
    box-shadow:0 16px 48px rgba(0,0,0,.65);display:grid;
    grid-template-columns:120px minmax(0,1fr) 36px;gap:11px;
    padding:8px 8px 8px 26px;min-height:96px;overflow:hidden;
    transition:none;
}
.board-reorder-drop-line{
    position:absolute;left:8px;right:8px;height:3px;border-radius:999px;
    background:#4a9eff;box-shadow:0 0 8px rgba(74,158,255,.7);
    pointer-events:none;z-index:9101;display:none;
    transition:top .06s linear;
}
#board-transfer-ghost{
    position:fixed;left:0;top:0;z-index:9005;display:none;pointer-events:none;
    min-width:132px;max-width:190px;padding:9px 11px;border-radius:10px;
    border:1px solid #4a9eff;background:rgba(15,25,38,.94);
    box-shadow:0 14px 38px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.05) inset;
    color:#eaf4ff;font:800 12px/1.15 system-ui,sans-serif;
}
#board-transfer-ghost .transfer-meta{
    display:block;margin-top:4px;color:#9fd5ff;font:700 10px/1.2 system-ui,sans-serif;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#board-transfer-ghost.over{border-color:#ffd166;background:rgba(39,32,17,.96);color:#fff5d6}
#board-transfer-ghost.over .transfer-meta{color:#ffd166}
.ibtn{
    width:36px;height:36px;border-radius:7px;border:1px solid #383838;
    background:#222;cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:background .12s,border-color .12s;
}
.ibtn:active{background:#2e2e2e}
.ibtn.on{background:#16314d;border-color:#4a9eff}
.ibtn[disabled]{opacity:.35;cursor:not-allowed}
body.light-mode{
    color-scheme:light;
    background:#f6f8fb;color:#263241;
}
body.light-mode #bar{
    background:rgba(253,254,255,.88);border-bottom-color:#dce4ee;
    box-shadow:0 10px 30px rgba(34,52,76,.08);
}
body.light-mode #logo{color:#718094}
body.light-mode #board-switcher-label{color:#263241}
body.light-mode #board-switcher-count{background:#edf3f8;color:#526274}
body.light-mode #share-view-badge{border-color:#bad8ee;background:#edf7ff;color:#226a9a}
body.light-mode #share-active-badge{border-color:#badfcd;background:#eff9f4;color:#2c7651}
body.light-mode #user-badge{border-color:#d9e2ec;background:#f5f8fb;color:#526274}
body.light-mode #account-menu-btn-label{color:#263241}
body.light-mode .ibtn{
    border-color:#d9e2ec;background:#fbfcfe;
    box-shadow:0 1px 0 rgba(255,255,255,.88) inset,0 8px 18px rgba(34,52,76,.05);
}

body.light-mode .ibtn#note-delete-btn, body.light-mode .ibtn#note-duplicate-btn{border-color: #d9e2ec;}

body.light-mode .ibtn:hover{background:#f2f7fb;border-color:#c9d8e6}
body.light-mode .ibtn:active{background:#e8eef5}
body.light-mode .ibtn.on{background:#e8f3ff;border-color:#4f91c9}
body.light-mode #ws-select{
    background-color:#fbfcfe;color:#263241;border-color:#d9e2ec;
}
body.light-mode #account-dropdown,
body.light-mode #boards-panel,
body.light-mode #board-tools-panel,
body.light-mode #ink-tools,
body.light-mode #minimap,
body.light-mode #upload-status,
body.light-mode #crop-card,
body.light-mode #share-card,
body.light-mode #board-form-card,
body.light-mode #board-delete-card,
body.light-mode #share-view-state-card,
body.light-mode #auth-card{
    border-color:#dce4ee;background:rgba(255,255,255,.7);box-shadow:0 18px 48px rgba(34,52,76,.13);
}
body.light-mode #boards-panel-head{border-bottom-color:#dce4ee}
body.light-mode #boards-panel-title,
body.light-mode .board-card-title,
body.light-mode #upload-status-label,
body.light-mode #crop-title,
body.light-mode .modal-title,
body.light-mode #share-title,
body.light-mode #share-view-state-title,
body.light-mode #auth-title{color:#263241}
body.light-mode .board-card-sub,
body.light-mode .board-card-empty,
body.light-mode #upload-status-meta,
body.light-mode #crop-subtitle,
body.light-mode .modal-subtitle,
body.light-mode #share-subtitle,
body.light-mode #auth-subtitle,
body.light-mode #share-view-state-message{color:#6c7887}
body.light-mode #boards-search,
body.light-mode .menu-item,
body.light-mode #note-text,
body.light-mode #ink-tools input[type="color"],
body.light-mode .modal-input,
body.light-mode #share-link-input,
body.light-mode .auth-input{
    border-color:#d9e2ec;background:#fbfcfe;color:#263241;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}
body.light-mode #boards-search:focus,
body.light-mode #share-link-input:focus,
body.light-mode .modal-input:focus,
body.light-mode .auth-input:focus{border-color:#4f91c9;box-shadow:0 0 0 3px rgba(79,145,201,.14)}
body.light-mode .board-card{
    border-color:#dce4ee;background:rgba(255,255,255,.92);color:#263241;
    box-shadow:0 10px 24px rgba(34,52,76,.06),0 1px 0 rgba(255,255,255,.92) inset;
}
body.light-mode .board-card:hover,
body.light-mode .board-card.drop-target{background:#f1f8ff;border-color:#4f91c9}
body.light-mode .board-card.active{background:#fff8e6;border-color:#d7a72d}
body.light-mode .board-card-preview{background:#f4f7fa;border-color:#dce4ee}
body.light-mode #board-tools-toggle{
    border-color:#dce4ee;background:rgba(255,255,255,.92);color:#526274;box-shadow:-8px 10px 28px rgba(34,52,76,.1);
}
body.light-mode #board-tools-toggle:hover{background:#f1f7fb;color:#226a9a}
body.light-mode .note-align-btn,
body.light-mode .note-valign-btn{
    border-color:#d9e2ec;background:#fbfcfe;color:#526274;
}
body.light-mode #ink-tools input[type="range"]{accent-color:#7d4fb0}
body.light-mode #ink-btn.on,
body.light-mode #ink-pencil-btn.on,
body.light-mode #ink-erase-btn.on{border-color:#8a62c1;background:#f2eaff}
body.light-mode #ink-touch-btn.on{border-color:#5b9d8d;background:#e8f7f3}
body.light-mode #ink-visibility-btn.on{border-color:#4f91c9;background:#e8f3ff}
body.light-mode .ink-color-swatch{border-color:rgba(38,50,65,.18);box-shadow:0 0 0 1px rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.28)}
body.light-mode .ink-color-swatch.on{border-color:#8a62c1;box-shadow:0 0 0 2px rgba(138,98,193,.28),0 0 0 1px rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.3)}
body.light-mode .note-align-btn.on,
body.light-mode .note-valign-btn.on{border-color:#d7a72d;background:#fff5d6;color:#745400}
body.light-mode #board{
    background-color:#f5f7fa;
    background-image:radial-gradient(#d8e1ea 1px,transparent 1px);
}
body.light-mode .board-space{
    border-color:rgba(55,122,158,.5);background:rgba(99,168,205,.12);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);color:#244b67;
}
body.light-mode .board-space.sel{border-color:#d7a72d;background:rgba(255,209,102,.16)}
body.light-mode .board-space-title{background:rgba(239,247,252,.86);border-bottom-color:rgba(55,122,158,.22)}
body.light-mode .board-space-hint{color:rgba(36,75,103,.56)}
body.light-mode .board-space-delete{background:rgba(255,255,255,.62);color:#263241;border-left-color:rgba(42,111,151,.22)}
body.light-mode .resize-handle::before,
body.light-mode .resize-handle::after{background:#263241;box-shadow:0 8px 18px rgba(39,55,77,.18)}
body.light-mode #rotation-stem{background:rgba(38,50,65,.68)}
body.light-mode #pip-panel{border-color:#dce4ee;background:#fff;box-shadow:0 18px 48px rgba(34,52,76,.13)}
body.light-mode #pip-panel-bar{background:rgba(255,255,255,.94);border-bottom-color:#dce4ee}
body.light-mode #pip-panel-label{color:#5b6877}
body.light-mode #pip-panel-note{color:#7b8794}
body.light-mode #pip-panel-close{border-color:#d9e2ec;background:#fbfcfe;color:#526274}
body.light-mode #pip-panel-board{background:#f5f7fa;background-image:radial-gradient(#d8e1ea 1px,transparent 1px)}
body.light-mode #minimap-view{border-color:#c99719;background:rgba(255,209,102,.18)}
body.light-mode #auth-screen{background:radial-gradient(circle at top, rgba(221,233,244,.78), rgba(246,248,251,.94) 62%)}
body.light-mode .auth-btn.secondary,
body.light-mode .share-btn.secondary,
body.light-mode .modal-btn.secondary{border-color:#d9e2ec;background:#f5f8fb;color:#526274}
body.light-mode .share-btn.danger,
body.light-mode .modal-btn.danger,
body.light-mode #delete-account-btn{border-color:#e5b7bd;background:#fff1f3;color:#a94453}
body.shared-view #ws-select,
body.shared-view #board-switcher-btn,
body.shared-view #rename-ws-btn,
body.shared-view #new-ws-btn,
body.shared-view #del-ws-btn,
body.shared-view #share-ws-btn,
body.shared-view #undo-btn,
body.shared-view #bar-separator,
body.shared-view #account-menu{display:none}
#rename-ws-btn,#new-ws-btn,#del-ws-btn,#share-ws-btn{display:none}
body.shared-view #lock-btn,
body.shared-view #snap-btn,
body.shared-view #arrange-btn,
body.shared-view #space-btn,
body.shared-view #note-btn,
body.shared-view #ink-btn,
body.shared-view #ink-tools,
body.shared-view #multi-select-btn,
body.shared-view #note-tools,
body.shared-view #img-tools{display:none}
body.shared-view #pip-btn{margin-left:auto}
#board-tools-panel.hidden{display:none}
#board-tools-panel{
    position:fixed;top:70px;right:16px;z-index:8606;
    display:flex;flex-direction:column;gap:10px;padding:10px;
    border:1px solid #2b313a;border-radius:14px;
    background:rgba(11,14,19,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 16px 42px rgba(0,0,0,.34);
    overflow:visible;
    transition:transform .22s ease,box-shadow .22s ease;
}
#board-tools-toggle{
    position:absolute;left:-30px;top:50%;transform:translateY(-50%);
    width:30px;height:54px;padding:0;border:1px solid #2b313a;border-right:0;
    border-radius:12px 0 0 12px;background:rgba(11,14,19,.94);color:#cfd8e3;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:-8px 10px 28px rgba(0,0,0,.24);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:background .14s ease,color .14s ease,transform .22s ease;
}
#board-tools-toggle:hover{background:#17202b;color:#9fd5ff}
#board-tools-toggle:active{background:#212937;color:#fff}
#board-tools-toggle-icon{flex-shrink:0;transition:transform .18s ease}
#board-tools-body{display:flex;flex-direction:column;gap:10px}
#board-tools-panel.collapsed{
    transform:translateX(calc(100% + 8px));
    box-shadow:none;
}
#board-tools-panel.collapsed #board-tools-toggle{transform:translateY(-50%)}
#board-tools-panel.collapsed #board-tools-toggle-icon{transform:rotate(180deg)}
#board-tools-actions{display:grid;grid-template-columns:repeat(3,36px);gap:8px}
#img-tools{display:none;grid-template-columns:repeat(3,36px);gap:8px}
#note-tools{display:none;grid-template-columns:1fr;gap:9px;width:172px}
#note-text{
    width:100%;height:82px;resize:none;box-sizing:border-box;
    border:1px solid #2c3440;border-radius:8px;padding:8px 9px;
    background:#11161d;color:#e7edf5;font:600 12px/1.35 system-ui,sans-serif;
    outline:none;
}
#note-text:focus{border-color:#ffd166;box-shadow:0 0 0 3px rgba(255,209,102,.14)}
#note-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.note-swatch{
    height:26px;border:1px solid rgba(255,255,255,.18);border-radius:7px;
    cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.note-swatch.on{outline:2px solid #ffd166;outline-offset:2px}
#note-align,#note-valign{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.note-align-btn,.note-valign-btn{
    height:30px;border:1px solid #303844;border-radius:7px;background:#171d26;
    display:flex;align-items:center;justify-content:center;
    color:#cdd7e3;font:800 13px/1 system-ui,sans-serif;cursor:pointer;
}
.note-align-btn.on,.note-valign-btn.on{border-color:#ffd166;background:#2a2417;color:#ffe29a}
#note-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
#ink-tools{
    position:fixed;top:70px;left:50%;transform:translateX(-50%);
    z-index:8606;display:none;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center;
    width:min(96vw,430px);
    padding:8px;border:1px solid #2b313a;border-radius:14px;background:rgba(11,14,19,.7);
    box-shadow:0 16px 42px rgba(0,0,0,.34);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    overflow:visible;
    transition:top .22s ease;
}
body.tools-chrome-hidden #ink-tools{top:16px}
#ink-tools-main{
    display:grid;grid-template-columns:36px 36px 36px minmax(90px,1fr) 36px 36px;gap:8px;align-items:center;
}
#ink-color-row{display:flex;align-items:center;justify-content:space-between;gap:4px}
.ink-color-swatch{
    flex:0 0 auto;width:18px;height:18px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:999px;
    background:var(--ink-swatch-color);box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.18);
    cursor:pointer;
}
.ink-color-swatch.on{border-color:#d7a8ff;box-shadow:0 0 0 2px rgba(215,168,255,.34),0 0 0 1px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.22)}
#ink-tools input[type="color"]{
    flex:0 0 auto;width:20px;height:20px;padding:2px;border:1px solid #303844;border-radius:999px;background:#171d26;cursor:pointer;
}
#ink-tools input[type="range"]{width:100%;accent-color:#d7a8ff}
#ink-btn.on,#ink-pencil-btn.on,#ink-erase-btn.on{border-color:#d7a8ff;background:#251b30}
#ink-touch-btn.on{border-color:#97d7c2;background:#172b27}
#ink-visibility-btn.on{border-color:#9fd5ff;background:#172533}
#ink-visibility-btn .ink-eye-slash{display:none}
#ink-visibility-btn.on .ink-eye-slash{display:block}
#note-actions .ibtn{width:100%}
#note-duplicate-btn{height:32px;border-color:#244766}
#note-delete-btn{height:32px;border-color:#4a1e1e}
#del-btn,#del-ws-btn{border-color:#4a1e1e}
#del-btn:active{background:#3a1414}
#del-ws-btn:active{background:#3a1414}

#board{
    position:fixed;top:54px;left:0;right:0;bottom:0;overflow:hidden;
    background-color:#1a1a1a;
    background-image:radial-gradient(#2b2b2b 1px,transparent 1px);
    background-size:40px 40px;
    cursor:grab;
}
body.tools-chrome-hidden #board{top:0}
#board.panning{cursor:grabbing}
#vp{position:absolute;top:0;left:0;width:0;height:0;transform-origin:0 0}
#vp,#ink-layer{will-change:transform}

.board-space{
    position:absolute;left:0;top:0;box-sizing:border-box;
    border:2px solid rgba(143,209,255,.62);border-radius:8px;
    background:rgba(28,65,92,.18);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
    color:#dff2ff;touch-action:none;user-select:none;cursor:pointer;
    overflow:hidden;z-index:0;
}
.board-space.sel{border-color:#ffd166;background:rgba(42,95,123,.24);box-shadow:0 0 0 2px rgba(255,209,102,.2),inset 0 0 0 1px rgba(255,255,255,.08);cursor:grab}
.board-space.sel:active{cursor:grabbing}
.board-space-title{
    height:66px;padding:0 10px;display:flex;align-items:center;
    background:rgba(12,20,28,.72);border-bottom:1px solid rgba(143,209,255,.3);
    font-size:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    pointer-events:none;
}
.board-space-hint{
    position:absolute;right:8px;bottom:7px;color:rgba(223,242,255,.5);
    font:600 11px/1 system-ui,sans-serif;pointer-events:none;transform-origin:100% 100%;
}
.board-space:not(.sel) .board-space-hint{display:none}
.board-space-delete{
position: absolute;
    right: 0px;
    top: 1px;
    width: 64px;
    height: 64px;
    border: 0px solid rgba(255, 255, 255, .22);
    border-left: 1px solid rgba(255, 255, 255, .22);
    background: rgb(39 39 39 / 50%);
    color: #fefefe;
    display: none;
    font-size: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform-origin: 100% 0;
}
.board-space-resize{
    position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;
    display:none;transform-origin:100% 100%;
}
.board-space.sel .board-space-delete{display:flex}
.board-space.sel .board-space-resize{display:block}
.board-space-resize::before{
    content:"";position:absolute;right:6px;bottom:6px;width:8px;height:8px;
    border-right:2px solid rgba(223,242,255,.78);border-bottom:2px solid rgba(223,242,255,.78);
}
#board.locked .board-space{pointer-events:none}

.ri{
    position:absolute;left:0;top:0;
    transform-origin:0 0;
    touch-action:none;user-select:none;
    max-width:600px;max-height:600px;
    /* box-shadow:0 4px 20px rgba(0,0,0,.7); */
    border-radius:2px;display:block;cursor:grab;
}
.ri.sel{outline:2px solid #4a9eff;outline-offset:3px}
.ri.primary{outline-color:#ffd166}
#board.locked .ri{pointer-events:none}

.board-note{
    --note-bg:#ffdf79;--note-stroke:#d6ad3e;--note-text:#272216;
    position:absolute;left:0;top:0;box-sizing:border-box;
    width:260px;height:170px;padding:18px 18px 16px;
    border:1px solid color-mix(in srgb,var(--note-stroke),#000 12%);
    border-radius:0;background:var(--note-bg);color:var(--note-text);
    transform-origin:0 0;touch-action:none;user-select:none;cursor:grab;
    display:flex;flex-direction:column;justify-content:flex-start;
    font:700 42px/1.28 system-ui,sans-serif;white-space:pre-wrap;overflow:hidden;
}

.board-note.sel{outline:2px solid #4a9eff;outline-offset:3px}
.board-note.primary{outline-color:#ffd166}
#board.locked .board-note{pointer-events:none}

#board.selection-mode{cursor:crosshair}
#board.selection-mode .ri{cursor:crosshair}
#board.ink-mode{cursor:crosshair}
#ink-layer{
    position:absolute;left:-100000px;top:-100000px;width:200000px;height:200000px;overflow:visible;
    z-index:2147483647;pointer-events:none;touch-action:none;
    contain:layout style paint;
}
#board.ink-mode #ink-layer{pointer-events:auto}
.ink-stroke,.ink-stroke path{
    fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.ink-tile{pointer-events:none;image-rendering:auto}
#marquee-selection{
    display:none;position:fixed;left:0;top:0;z-index:8450;pointer-events:none;
    border:1px solid rgba(74,158,255,.95);background:rgba(74,158,255,.18);
    box-shadow:0 0 0 1px rgba(13,17,23,.28) inset;
}

#transform-controls{
    display:none;position:fixed;left:0;top:0;z-index:8500;pointer-events:none;
}
#note-shape-controls{
    display:none;position:fixed;left:0;top:0;z-index:8495;pointer-events:none;
}
.note-shape-handle{
    position:absolute;pointer-events:auto;background:#ffd166;border:2px solid #11161d;
    box-shadow:0 8px 18px rgba(0,0,0,.28);opacity:.86;transition:opacity .14s,transform .14s;
}
.note-shape-handle:hover,.note-shape-handle:active{opacity:1;transform:scale(1.08)}
.note-shape-handle[data-side="left"],
.note-shape-handle[data-side="right"]{width:10px;height:42px;border-radius:999px;cursor:ew-resize}
.note-shape-handle[data-side="top"],
.note-shape-handle[data-side="bottom"]{width:42px;height:10px;border-radius:999px;cursor:ns-resize}
.resize-handle,
#rotation-handle,
#rotation-stem{
    position:absolute;pointer-events:auto;
}
.resize-handle{
    --handle-size:34px;
    --handle-length:18px;
    --handle-thickness:6px;
    width:var(--handle-size);height:var(--handle-size);
    background:transparent;opacity:.5;
    transition:opacity .18s ease;
}
.resize-handle::before,
.resize-handle::after{
    content:'';position:absolute;background:#fff;border-radius:999px;
    box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.resize-handle:hover,
.resize-handle:active{
    opacity:1;
}
.resize-handle[data-corner="nw"]::before,
.resize-handle[data-corner="ne"]::before,
.resize-handle[data-corner="sw"]::before,
.resize-handle[data-corner="se"]::before{
    width:var(--handle-length);height:var(--handle-thickness);
}
.resize-handle[data-corner="nw"]::after,
.resize-handle[data-corner="ne"]::after,
.resize-handle[data-corner="sw"]::after,
.resize-handle[data-corner="se"]::after{
    width:var(--handle-thickness);height:var(--handle-length);
}
.resize-handle[data-corner="nw"]{
    cursor:nwse-resize;
}
.resize-handle[data-corner="nw"]::before{
    left:0;top:0;
}
.resize-handle[data-corner="nw"]::after{
    left:0;top:0;
}
.resize-handle[data-corner="ne"]{
    cursor:nesw-resize;
}
.resize-handle[data-corner="ne"]::before{
    right:0;top:0;
}
.resize-handle[data-corner="ne"]::after{
    right:0;top:0;
}
.resize-handle[data-corner="sw"]{
    cursor:nesw-resize;
}
.resize-handle[data-corner="sw"]::before{
    left:0;bottom:0;
}
.resize-handle[data-corner="sw"]::after{
    left:0;bottom:0;
}
.resize-handle[data-corner="se"]{
    cursor:nwse-resize;
}
.resize-handle[data-corner="se"]::before{
    right:0;bottom:0;
}
.resize-handle[data-corner="se"]::after{
    right:0;bottom:0;
}
#rotation-stem{
    width:2px;height:24px;background:rgba(255,255,255,.72);
    transform:translateX(-50%);
    box-shadow:0 0 0 1px rgba(13,17,23,.2);
    pointer-events:none;
}
#rotation-handle{
    width:26px;height:26px;border-radius:50%;
    border:2px solid #0d1117;background:#ffd166;
    box-shadow:0 10px 24px rgba(0,0,0,.4);cursor:grab;
}
#rotation-handle::before{
    content:'';position:absolute;inset:6px;border-radius:50%;
    border:2px solid rgba(13,17,23,.78);border-right-color:transparent;
    transform:rotate(-35deg);
}
#rotation-handle::after{
    content:'';position:absolute;right:5px;top:4px;width:0;height:0;
    border-left:5px solid rgba(13,17,23,.78);
    border-top:4px solid transparent;border-bottom:4px solid transparent;
    transform:rotate(14deg);
}
#rotation-handle:active{cursor:grabbing}

#drop-ov{
    display:none;position:fixed;inset:0;
    background:rgba(20,60,160,.2);border:3px dashed #4a9eff;
    z-index:8000;pointer-events:none;
    justify-content:center;align-items:center;
    font-size:1.4rem;color:#fff;letter-spacing:.04em;
}

#upload-status{
    position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:11020;
    width:min(360px,calc(100vw - 28px));padding:12px 14px;border-radius:16px;
    border:1px solid #2b313a;background:rgba(11,14,19,.94);
    box-shadow:0 22px 56px rgba(0,0,0,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#upload-status.hidden{display:none}
#upload-status-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#upload-status-label{color:#e5edf6;font:600 12px/1.2 system-ui,sans-serif}
#upload-status-meta{color:#8e99a6;font:500 11px/1.2 system-ui,sans-serif;white-space:nowrap}
#upload-status-track{margin-top:10px;height:8px;border-radius:999px;background:#1c222c;overflow:hidden}
#upload-status-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#4a9eff,#89d6c7);transition:width .14s ease}

#hint{
    position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
    background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
    padding:5px 14px;border-radius:20px;font-size:11px;color:#555;
    white-space:nowrap;pointer-events:none;z-index:999;
}

#pip-panel{
    position:fixed;right:16px;bottom:56px;width:320px;height:220px;z-index:8700;
    border:1px solid #2b313a;border-radius:14px;overflow:hidden;
    background:#0f1115;box-shadow:0 18px 48px rgba(0,0,0,.45);
}
#pip-panel.hidden{display:none}
#pip-panel-bar{
    height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;
    background:rgba(10,12,16,.96);border-bottom:1px solid #20242d;cursor:grab;
}
#pip-panel.dragging #pip-panel-bar{cursor:grabbing}
#pip-panel-label{font:600 11px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#7f8a95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pip-panel-note{margin-left:auto;font:500 10px/1 system-ui,sans-serif;color:#5f6975;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
#pip-panel-close{
    width:22px;height:22px;border-radius:999px;border:1px solid #2b313a;background:#161a20;color:#9ca7b4;
    display:flex;align-items:center;justify-content:center;cursor:pointer;font:600 12px/1 system-ui,sans-serif;padding:0;
}
#pip-panel-board{position:relative;height:calc(100% - 36px);overflow:hidden;background:#121417;background-image:radial-gradient(#252931 1px,transparent 1px);background-size:40px 40px}
#pip-panel-vp{position:absolute;top:0;left:0;width:0;height:0;transform-origin:0 0}

#snap-guide-x,#snap-guide-y{
    display:none;position:fixed;pointer-events:none;z-index:8600;
    background:rgba(255,209,102,.92);box-shadow:0 0 0 1px rgba(0,0,0,.22);
}
#snap-guide-x{top:54px;bottom:0;width:2px;transform:translateX(-1px)}
body.tools-chrome-hidden #snap-guide-x{top:0}
#snap-guide-y{left:0;right:0;height:2px;transform:translateY(-1px)}

#minimap{
    position:fixed;left:16px;bottom:18px;width:190px;height:138px;z-index:8605;
    border:1px solid #2b313a;border-radius:14px;overflow:hidden;
    background:rgba(11,14,19,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 16px 42px rgba(0,0,0,.34);touch-action:none;
}
#minimap.hidden{display:none}
#minimap-canvas{width:100%;height:100%;display:block}
#minimap-view{
    position:absolute;left:0;top:0;border:1px solid #ffd166;border-radius:8px;
    background:rgba(255,209,102,.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);pointer-events:none;
}

#crop-modal{
    position:fixed;inset:0;z-index:11500;display:flex;align-items:center;justify-content:center;
    padding:18px;background:rgba(4,6,10,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#crop-modal.hidden{display:none}
#crop-card{
    width:min(920px,100%);max-height:min(92vh,820px);display:flex;flex-direction:column;gap:12px;
    padding:14px;border-radius:18px;border:1px solid #2b313a;background:rgba(12,16,22,.96);
    box-shadow:0 28px 80px rgba(0,0,0,.5);
}
#crop-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#crop-title{font:700 13px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#d9e2ec}
#crop-subtitle{color:#8e99a6;font:500 12px/1.4 system-ui,sans-serif}
#crop-stage{
    position:relative;min-height:320px;height:min(62vh,620px);border-radius:16px;border:1px solid #262d37;
    background:#0e1218;overflow:hidden;touch-action:none;
}
#crop-image-wrap{position:absolute;left:0;top:0}
#crop-image{display:block;max-width:none;max-height:none;pointer-events:none;user-select:none}
#crop-selection{
    position:absolute;left:0;top:0;border:2px solid #ffd166;border-radius:12px;cursor:move;
    box-shadow:0 0 0 9999px rgba(2,4,8,.56), inset 0 0 0 1px rgba(0,0,0,.18);
    touch-action:none;
}
#crop-selection-handle{
    position:absolute;right:-11px;bottom:-11px;width:24px;height:24px;border-radius:999px;
    border:2px solid #0d1117;background:#ffd166;box-shadow:0 8px 20px rgba(0,0,0,.4);cursor:nwse-resize;
    touch-action:none;
}
#crop-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
#crop-cancel-btn,#crop-reset-btn,#crop-save-btn{
    min-width:120px;height:40px;padding:0 14px;border-radius:10px;border:1px solid #323a45;
    background:#171b22;color:#d7dee6;font:600 13px/1 system-ui,sans-serif;cursor:pointer;
}
#crop-save-btn{border-color:#2f6fbe;background:#1f5ea9;color:#f3f6fa}
#crop-save-btn[disabled]{opacity:.6;cursor:not-allowed}

@media (max-width: 720px){
    #board-switcher-btn{min-width:124px;max-width:150px}
    #boards-panel{width:100vw;right:0}
    #boards-panel-backdrop{background:rgba(0,0,0,.42)}
    .board-card{grid-template-columns:110px minmax(0,1fr) 34px}
    .board-card-preview{width:110px;height:68px}
    #board-tools-panel{top:auto;right:12px;bottom:164px}
    #ink-tools{top:66px;width:calc(100vw - 16px);grid-template-columns:minmax(0,1fr)}
    #ink-tools-main{grid-template-columns:32px 32px 32px minmax(72px,1fr) 32px 32px;gap:6px}
    #crop-card{padding:12px}
    #crop-stage{height:min(52vh,520px)}
    #crop-actions button{flex:1}
}

#auth-screen{
    position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at top, rgba(44,54,72,.55), rgba(7,9,13,.9) 60%);
    padding:20px;
}
#auth-card{
    width:min(420px, 100%);padding:22px;border-radius:18px;
    border:1px solid #2b313a;background:rgba(13,17,23,.94);
    box-shadow:0 28px 80px rgba(0,0,0,.45);
}
#auth-title{font:700 20px/1.1 system-ui,sans-serif;color:#eef2f7;letter-spacing:.08em;text-transform:uppercase}
#auth-subtitle{margin-top:8px;color:#8e99a6;font:500 13px/1.5 system-ui,sans-serif}
#auth-form{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.auth-input{
    width:100%;height:42px;border-radius:10px;border:1px solid #323a45;background:#171b22;color:#eef2f7;
    padding:0 12px;font:500 14px/1 system-ui,sans-serif;outline:none;
}
.auth-input:focus{border-color:#4a9eff;box-shadow:0 0 0 3px rgba(74,158,255,.14)}
#auth-actions{display:flex;gap:10px;margin-top:4px}
.auth-btn{
    flex:1;height:42px;border-radius:10px;border:1px solid #2f6fbe;background:#1f5ea9;color:#f3f6fa;
    font:600 14px/1 system-ui,sans-serif;cursor:pointer;
}
.auth-btn.secondary{border-color:#323a45;background:#1a1f27;color:#c7d0da}
#auth-msg{min-height:18px;color:#8e99a6;font:500 12px/1.4 system-ui,sans-serif}
#auth-msg.error{color:#f2a6b3}
#share-modal,
#board-form-modal,
#board-delete-modal,
#share-view-state{
    position:fixed;inset:0;z-index:11200;display:flex;align-items:center;justify-content:center;
    padding:18px;background:rgba(0,0,0,.54);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
#share-card,
#board-form-card,
#board-delete-card,
#share-view-state-card{
    width:min(420px,100%);padding:18px;border-radius:18px;border:1px solid #2b313a;
    background:rgba(11,14,19,.96);box-shadow:0 28px 70px rgba(0,0,0,.48);
}
#share-card{
    position:relative;z-index:1;display:block;visibility:visible;opacity:1;
}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
#share-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.modal-title{color:#eef2f7;font:700 18px/1.1 system-ui,sans-serif}
#share-title{color:#eef2f7;font:700 18px/1.1 system-ui,sans-serif}
.modal-subtitle{margin-top:6px;color:#95a2b0;font:500 13px/1.45 system-ui,sans-serif}
#share-subtitle{margin-top:6px;color:#95a2b0;font:500 13px/1.45 system-ui,sans-serif}
.modal-close-btn{
    width:36px;height:36px;border-radius:10px;border:1px solid #323a45;background:#171b22;
    color:#d7dee6;font:600 18px/1 system-ui,sans-serif;cursor:pointer;flex-shrink:0;
}
#share-close-btn{
    width:36px;height:36px;border-radius:10px;border:1px solid #323a45;background:#171b22;
    color:#d7dee6;font:600 18px/1 system-ui,sans-serif;cursor:pointer;flex-shrink:0;
}
.modal-field{
    display:flex;flex-direction:column;gap:6px;margin-top:10px;
}
.modal-label{color:#9aa5b1;font:700 11px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em}
#share-link-input,
.modal-input{
    width:100%;height:42px;border-radius:10px;border:1px solid #323a45;background:#171b22;color:#eef2f7;
    padding:0 12px;font:500 13px/1 system-ui,sans-serif;outline:none;
}
.modal-input{height:40px}
.modal-input:disabled{opacity:.55}
#share-link-input:focus,.modal-input:focus{border-color:#4a9eff;box-shadow:0 0 0 3px rgba(74,158,255,.14)}
#share-actions,.modal-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.modal-actions.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.share-btn,.modal-btn{
    min-height:40px;padding:0 12px;border-radius:10px;border:1px solid #2f6fbe;background:#1f5ea9;
    color:#f3f6fa;font:600 13px/1 system-ui,sans-serif;cursor:pointer;
}
.share-btn.secondary,.modal-btn.secondary{border-color:#323a45;background:#1a1f27;color:#c7d0da}
.share-btn.danger,.modal-btn.danger{border-color:#5f252b;background:#221417;color:#f3b4be}
.share-btn[disabled],.modal-btn[disabled]{opacity:.45;cursor:not-allowed}
.modal-message{margin-top:10px;color:#8e99a6;font:500 12px/1.4 system-ui,sans-serif}
.modal-message.error{color:#f2a6b3}
#share-message{min-height:18px;margin-top:10px;color:#8e99a6;font:500 12px/1.4 system-ui,sans-serif}
#share-message.error{color:#f2a6b3}
#board-delete-name{color:#eef2f7;font:800 14px/1.3 system-ui,sans-serif;margin-top:6px}
#share-view-state-title{color:#eef2f7;font:700 20px/1.1 system-ui,sans-serif}
#share-view-state-message{margin-top:8px;color:#9aa5b1;font:500 14px/1.5 system-ui,sans-serif}