/* ============================================================
   Material Design 3 Design Tokens — Dark Theme
   ============================================================ */
:root {
    /* Primary */
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;
    /* Secondary */
    --md-sys-color-secondary: #CCC2DC;
    --md-sys-color-on-secondary: #332D41;
    --md-sys-color-secondary-container: #4A4458;
    --md-sys-color-on-secondary-container: #E8DEF8;
    /* Tertiary */
    --md-sys-color-tertiary: #EFB8C8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633B48;
    --md-sys-color-on-tertiary-container: #FFD8E4;
    /* Error */
    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #F9DEDC;
    /* Surface */
    --md-sys-color-surface: #141218;
    --md-sys-color-surface-container-lowest: #0F0D13;
    --md-sys-color-surface-container-low: #1D1B20;
    --md-sys-color-surface-container: #1B1720;
    --md-sys-color-surface-container-high: #2A2532;
    --md-sys-color-surface-container-highest: #36303E;
    --md-sys-color-on-surface: #E6E1E5;
    --md-sys-color-on-surface-variant: #CAC4D0;
    --md-sys-color-outline: #938F99;
    --md-sys-color-outline-variant: #49454F;
    /* Elevation */
    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
    --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);
    /* Shape */
    --md-sys-shape-extra-small: 4px;
    --md-sys-shape-small: 8px;
    --md-sys-shape-medium: 12px;
    --md-sys-shape-large: 16px;
    --md-sys-shape-extra-large: 28px;
    --md-sys-shape-full: 9999px;
    /* Layout */
    --sidebar-width: 260px;
    --topbar-height: 64px;
    /* Motion */
    --motion-short: 200ms cubic-bezier(0.2,0,0,1);
    --motion-medium: 400ms cubic-bezier(0.2,0,0,1);
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:var(--md-sys-color-surface);
    color:var(--md-sys-color-on-surface);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    display:flex;
}

/* Background */
.bg-image{position:fixed;inset:0;background:url('../statics/img/background.png') center/cover no-repeat;z-index:0;opacity:.2;filter:blur(3px)}
.bg-overlay{position:fixed;inset:0;background:linear-gradient(135deg,rgba(20,18,24,.88),rgba(20,18,24,.75));z-index:1}

/* ============================================================
   Sidebar
   ============================================================ */
.m3-sidebar{
    position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;
    background:var(--md-sys-color-surface-container);
    border-right:1px solid var(--md-sys-color-outline-variant);
    display:flex;flex-direction:column;
    z-index:100;overflow-y:auto;
}
.m3-sidebar-header{
    padding:20px 16px 16px;
    display:flex;align-items:center;gap:12px;
    border-bottom:1px solid var(--md-sys-color-outline-variant);
}
.logo-icon{
    width:44px;height:44px;border-radius:var(--md-sys-shape-medium);
    background:var(--md-sys-color-primary-container);
    color:var(--md-sys-color-on-primary-container);
    display:flex;align-items:center;justify-content:center;font-size:24px;
}
.logo-title{font-size:16px;font-weight:600;letter-spacing:.5px}

/* Nav */
.m3-nav{padding:8px;display:flex;flex-direction:column;gap:2px}
.m3-nav-item{
    display:flex;align-items:center;gap:12px;padding:12px 16px;
    border-radius:var(--md-sys-shape-full);border:none;
    background:transparent;color:var(--md-sys-color-on-surface-variant);
    font-size:14px;font-weight:500;font-family:inherit;
    cursor:pointer;text-align:left;
    transition:all var(--motion-short);
}
.m3-nav-item:hover{background:rgba(208,188,255,.08);color:var(--md-sys-color-on-surface)}
.m3-nav-item.active{
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-secondary-container);font-weight:600;
}
.m3-nav-item .material-symbols-rounded{font-size:24px}

.m3-nav-badge{
    margin-left:auto;background:var(--md-sys-color-primary-container);
    color:var(--md-sys-color-on-primary-container);
    font-size:11px;padding:2px 8px;border-radius:var(--md-sys-shape-full);
    min-width:20px;text-align:center;font-weight:600;
}

/* Sidebar divider & section */
.m3-sidebar-divider{height:1px;background:var(--md-sys-color-outline-variant);margin:8px 16px}
.m3-sidebar-section{
    padding:8px 12px 12px;flex-shrink:0;display:flex;flex-direction:column;
    max-height:38%;min-height:0;
}
.m3-sidebar-section-header{
    font-size:13px;font-weight:600;color:var(--md-sys-color-on-surface-variant);
    display:flex;align-items:center;gap:6px;padding:0 4px;
}
.m3-sidebar-section-header .material-symbols-rounded{font-size:18px}
.sidebar-results-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;min-height:0}
.sidebar-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px;text-align:center;padding:12px;opacity:.7}

.sidebar-result-item{
    display:flex;align-items:center;gap:8px;padding:8px 10px;
    border-radius:var(--md-sys-shape-small);
    background:var(--md-sys-color-surface-container-high);
    animation:slideInFromCenter .5s ease-out;font-size:13px;
}
.sidebar-result-item .result-avatar-small{
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:600;color:#fff;flex-shrink:0;
}
.sidebar-result-item .result-text{overflow:hidden}
.sidebar-result-item .result-text .name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-result-item .result-text .uid{font-size:11px;color:var(--md-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-results-actions{padding-top:8px}

/* ============================================================
   Main & Topbar
   ============================================================ */
.m3-main{
    flex:1;margin-left:var(--sidebar-width);
    display:flex;flex-direction:column;
    overflow:hidden;position:relative;z-index:2;
    min-width:0;
}
.m3-topbar{
    position:sticky;top:0;height:var(--topbar-height);
    background:var(--md-sys-color-surface-container);
    border-bottom:1px solid var(--md-sys-color-outline-variant);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 24px;z-index:50;
    backdrop-filter:blur(10px);
}
.m3-topbar-title{font-size:22px;font-weight:600;letter-spacing:.25px}
.m3-topbar-actions{display:flex;align-items:center;gap:4px}

.m3-icon-button{
    width:40px;height:40px;border-radius:50%;border:none;
    background:transparent;color:var(--md-sys-color-on-surface-variant);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all var(--motion-short);font-size:20px;
}
.m3-icon-button:hover{background:rgba(208,188,255,.1);color:var(--md-sys-color-on-surface)}
.m3-icon-button.playing{color:var(--md-sys-color-tertiary);animation:bgmPulse 2s ease-in-out infinite}
.m3-icon-button.paused{color:var(--md-sys-color-on-surface-variant);opacity:.5}

@keyframes bgmPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ============================================================
   Content & Pages
   ============================================================ */
.m3-content{flex:1;overflow-y:auto;padding:24px;position:relative}
.m3-page{position:absolute;inset:0;overflow-y:auto;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s ease-out,transform .3s ease-out;transform:translateY(12px);display:flex;flex-direction:column;gap:16px}
.m3-page.active{opacity:1;transform:translateY(0);pointer-events:auto}

/* ============================================================
   Cards
   ============================================================ */
.m3-card-outlined{
    background:var(--md-sys-color-surface-container-low);
    border:1px solid var(--md-sys-color-outline-variant);
    border-radius:var(--md-sys-shape-medium);
    padding:16px 20px;
}
.m3-card-title{
    font-size:16px;font-weight:600;
    display:flex;align-items:center;gap:8px;
    margin-bottom:12px;
}
.m3-card-title .material-symbols-rounded{font-size:22px;color:var(--md-sys-color-primary)}

.m3-card-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.m3-card-header .m3-card-title{margin-bottom:0}
.m3-card-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ============================================================
   Buttons
   ============================================================ */
.m3-button-filled,.m3-button-tonal,.m3-button-text{
    display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
    border-radius:var(--md-sys-shape-full);font-size:14px;font-weight:600;
    font-family:inherit;cursor:pointer;border:none;
    transition:all var(--motion-short);white-space:nowrap;
    text-decoration:none;
}
.m3-button-filled .material-symbols-rounded,
.m3-button-tonal .material-symbols-rounded,
.m3-button-text .material-symbols-rounded{font-size:20px}
.m3-button-filled{
    background:var(--md-sys-color-primary-container);
    color:var(--md-sys-color-on-primary-container);
}
.m3-button-filled:hover{box-shadow:var(--md-sys-elevation-2);filter:brightness(1.15)}
.m3-button-tonal{
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-secondary-container);
}
.m3-button-tonal:hover{box-shadow:var(--md-sys-elevation-1);filter:brightness(1.15)}
.m3-button-text{background:transparent;color:var(--md-sys-color-primary)}
.m3-button-text:hover{background:rgba(208,188,255,.08)}
a.m3-button-tonal{text-decoration:none}

/* Chip */
.m3-chip{
    font-size:12px;padding:2px 10px;border-radius:var(--md-sys-shape-full);
    font-weight:500;background:var(--md-sys-color-primary-container);
    color:var(--md-sys-color-on-primary-container);
    margin-left:4px;
}

/* ============================================================
   Table
   ============================================================ */
.m3-table-wrapper{overflow-x:auto;border-radius:var(--md-sys-shape-small)}
.m3-table{width:100%;border-collapse:collapse;font-size:13px}
.m3-table thead{background:var(--md-sys-color-surface-container-high)}
.m3-table th{
    text-align:left;padding:10px 16px;color:var(--md-sys-color-on-surface-variant);
    font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
    border-bottom:1px solid var(--md-sys-color-outline-variant);white-space:nowrap;
}
.m3-table td{padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.m3-table tbody tr:hover{background:rgba(255,255,255,.02)}
.m3-table .empty-row td{text-align:center;color:var(--md-sys-color-on-surface-variant);padding:32px;font-size:14px}

/* ============================================================
   Form components
   ============================================================ */
.form-field{margin-bottom:12px}
.form-row{display:flex;gap:12px;margin-bottom:12px}
.flex-1{flex:1}
.m3-label{
    display:block;font-size:12px;font-weight:600;
    color:var(--md-sys-color-on-surface-variant);
    margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px;
    line-height:20px;
}
.m3-input{
    width:100%;padding:10px 14px;
    background:var(--md-sys-color-surface-container-high);
    border:1px solid var(--md-sys-color-outline-variant);
    border-radius:var(--md-sys-shape-small);color:var(--md-sys-color-on-surface);
    font-size:14px;font-family:inherit;outline:none;
    transition:all var(--motion-short);
}
.m3-input:focus{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px rgba(208,188,255,.15)}
.m3-select{
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23CAC4D0' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 8px center;
    padding-right:36px;cursor:pointer;
}
.m3-select option{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}

/* Password toggle */
.password-input-wrapper{position:relative;display:flex;align-items:center}
.password-input-wrapper .m3-input{padding-right:44px}
.toggle-password{
    position:absolute;right:6px;background:none;border:none;
    color:var(--md-sys-color-on-surface-variant);cursor:pointer;
    padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.toggle-password:hover{background:rgba(255,255,255,.1)}

.m3-checkbox-label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.m3-checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--md-sys-color-primary)}

.form-actions{display:flex;align-items:center;gap:12px;margin-top:16px}

/* Add person */
.add-person-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.add-person-fields{display:flex;gap:12px;flex:1;flex-wrap:wrap;min-width:0}
.add-person-fields .form-field{min-width:130px;margin-bottom:0}

/* Settings */
.settings-group{
    border:1px solid var(--md-sys-color-outline-variant);
    border-radius:var(--md-sys-shape-medium);padding:20px;margin-bottom:16px;
}
.settings-group legend{font-size:14px;font-weight:600;color:var(--md-sys-color-primary);padding:0 8px}

/* Recipients */
.recipients-preview{
    padding:8px 14px;background:var(--md-sys-color-surface-container-high);
    border-radius:var(--md-sys-shape-small);min-height:40px;
    display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:13px;
}
.recipient-chip{
    background:var(--md-sys-color-secondary-container);
    color:var(--md-sys-color-on-secondary-container);
    padding:4px 12px;border-radius:var(--md-sys-shape-full);font-size:12px;font-weight:500;
}
.no-recipients{color:var(--md-sys-color-on-surface-variant);opacity:.7}
.send-status{font-size:13px;font-weight:500}
.send-status.success{color:#81C784}.send-status.error{color:var(--md-sys-color-error)}

/* Placeholder help */
.placeholder-help{margin:8px 0 12px}
.ph-summary{font-size:13px;color:var(--md-sys-color-primary);cursor:pointer;font-weight:500}
.placeholder-chips{
    display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:8px;
    background:var(--md-sys-color-surface-container);border-radius:var(--md-sys-shape-small);
    border:1px solid rgba(255,255,255,.06);
}
.ph-chip{font-size:12px;padding:3px 10px;background:var(--md-sys-color-surface-container-high);border-radius:var(--md-sys-shape-full);color:var(--md-sys-color-on-surface-variant);border:1px solid rgba(255,255,255,.08)}
.ph-chip code{color:var(--md-sys-color-primary);background:transparent;padding:0;font-family:'Courier New',monospace;font-weight:600}

/* Quill overrides */
.ql-toolbar.ql-snow,.ql-container.ql-snow{border-color:var(--md-sys-color-outline-variant)!important;background:var(--md-sys-color-surface-container-high)}
.ql-toolbar.ql-snow{border-radius:var(--md-sys-shape-small) var(--md-sys-shape-small) 0 0}
.ql-container.ql-snow{border-radius:0 0 var(--md-sys-shape-small) var(--md-sys-shape-small);color:var(--md-sys-color-on-surface);font-family:inherit;font-size:14px}
.ql-snow .ql-stroke{stroke:var(--md-sys-color-on-surface-variant)}
.ql-snow .ql-fill{fill:var(--md-sys-color-on-surface-variant)}
.ql-snow .ql-picker{color:var(--md-sys-color-on-surface-variant)}
.ql-snow .ql-picker-options{background:var(--md-sys-color-surface-container-high);border-color:var(--md-sys-color-outline-variant)}

/* ============================================================
   Draw Page — All existing draw animations preserved
   ============================================================ */
#page-draw{align-items:center;justify-content:center}
.draw-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}
.floating-avatars{position:absolute;inset:0;pointer-events:none;z-index:1}
.floating-avatar{
    position:absolute;width:56px;height:56px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;font-weight:700;color:#fff;
    box-shadow:var(--md-sys-elevation-2);
    pointer-events:auto;cursor:default;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
    will-change:transform,rotate,scale,opacity;
}
.floating-avatar:hover{transform:scale(1.15)!important;z-index:100;box-shadow:var(--md-sys-elevation-3)}
.floating-avatar.contracting{animation:contractToCenter .8s ease-in forwards!important}
@keyframes contractToCenter{
    0%{opacity:1}60%{opacity:.6}
    100%{opacity:0;translate:-50% -50%;scale:0}
}
.draw-button-container{position:relative;z-index:5;transition:all var(--motion-medium)}
.draw-btn{
    width:140px;height:140px;border-radius:50%;
    background:var(--md-sys-color-primary-container);
    color:var(--md-sys-color-on-primary-container);
    border:4px solid var(--md-sys-color-primary);
    cursor:pointer;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:4px;
    font-size:16px;font-weight:700;font-family:inherit;
    box-shadow:0 0 60px rgba(208,188,255,.3),var(--md-sys-elevation-3);
    animation:pulse-ring 2s ease-in-out infinite;
}
.draw-btn:hover{transform:scale(1.05);box-shadow:0 0 80px rgba(208,188,255,.5),var(--md-sys-elevation-3)}
.draw-btn .material-symbols-rounded{font-size:48px}
.draw-btn.disabled{opacity:.5;pointer-events:none;animation:none;box-shadow:var(--md-sys-elevation-1)}
@keyframes pulse-ring{0%,100%{box-shadow:0 0 60px rgba(208,188,255,.3),var(--md-sys-elevation-3)}50%{box-shadow:0 0 90px rgba(208,188,255,.6),var(--md-sys-elevation-3)}}

/* Scroll draw */
.draw-scroll-container{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:500px;max-width:90vw;height:500px;overflow:hidden;z-index:10;
    background:var(--md-sys-color-surface-container-high);
    border-radius:var(--md-sys-shape-medium);
    box-shadow:var(--md-sys-elevation-3);border:2px solid var(--md-sys-color-primary);
}
.draw-scroll-container::before,.draw-scroll-container::after{
    content:'';position:absolute;left:0;right:0;height:80px;z-index:1;pointer-events:none;
}
.draw-scroll-container::before{top:0;background:linear-gradient(to bottom,var(--md-sys-color-surface-container-high),transparent)}
.draw-scroll-container::after{bottom:0;background:linear-gradient(to top,var(--md-sys-color-surface-container-high),transparent)}
.draw-scroll-indicator{
    position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:48px;
    background:rgba(208,188,255,.15);border-top:1px solid var(--md-sys-color-primary);
    border-bottom:1px solid var(--md-sys-color-primary);z-index:0;
}
.draw-scroll-list{position:relative;z-index:0;padding:160px 0}
.draw-scroll-item{
    display:flex;align-items:center;gap:16px;padding:10px 24px;
    font-size:16px;color:var(--md-sys-color-on-surface-variant);height:48px;
}
.draw-scroll-item.highlight{
    color:var(--md-sys-color-primary);font-weight:700;font-size:18px;
    background:rgba(208,188,255,.1);
}
.draw-scroll-item .scroll-uid{font-family:'Courier New',monospace;font-size:14px;min-width:100px}
.draw-scroll-item .scroll-name{font-weight:500}

/* Draw result */
.draw-result{position:relative;z-index:20;opacity:0;transform:scale(.5);transition:all .5s cubic-bezier(.34,1.56,.64,1)}
.draw-result.show{opacity:1;transform:scale(1)}
.result-card{
    background:var(--md-sys-color-surface-container-high);
    border-radius:var(--md-sys-shape-large);padding:32px 48px;
    display:flex;align-items:center;gap:24px;
    box-shadow:var(--md-sys-elevation-3);border:2px solid var(--md-sys-color-primary);
    min-width:320px;
}
.result-avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;flex-shrink:0}
.result-name{font-size:28px;font-weight:700}
.result-uid{font-size:16px;color:var(--md-sys-color-on-surface-variant);font-family:'Courier New',monospace;margin-top:4px}
.draw-continue{position:relative;z-index:20;margin-top:32px;animation:fadeInUp .5s ease-out}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Table avatar */
.table-avatar{
    width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:600;color:#fff;flex-shrink:0;
}

/* Result tabs */
.result-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.result-tab{
    padding:8px 16px;border-radius:var(--md-sys-shape-full);
    border:1px solid var(--md-sys-color-outline-variant);
    background:transparent;color:var(--md-sys-color-on-surface-variant);
    font-size:13px;font-weight:500;cursor:pointer;
    font-family:inherit;white-space:nowrap;
    display:flex;align-items:center;gap:4px;
    transition:all var(--motion-short);
}
.result-tab:hover{background:rgba(208,188,255,.08);color:var(--md-sys-color-on-surface)}
.result-tab.active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-color:var(--md-sys-color-primary-container)}
.result-tab .tab-count{font-size:11px;background:rgba(255,255,255,.2);padding:1px 6px;border-radius:var(--md-sys-shape-full)}
.result-tab .delete-tab{font-size:16px;cursor:pointer;margin-left:4px;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.result-tab .delete-tab:hover{background:rgba(255,255,255,.2)}

/* ============================================================
   Dialog
   ============================================================ */
.m3-dialog{
    border:none;border-radius:var(--md-sys-shape-extra-large);
    background:var(--md-sys-color-surface-container-high);
    color:var(--md-sys-color-on-surface);padding:0;
    box-shadow:var(--md-sys-elevation-3);
    max-width:450px;width:90vw;margin:auto;
}
.m3-dialog[open]{animation:dialogIn .25s ease-out forwards}
.m3-dialog.closing{animation:dialogOut .2s ease-in forwards}
@keyframes dialogIn{from{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes dialogOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.92) translateY(8px)}}
.m3-dialog::backdrop{background:rgba(0,0,0,0)}
.m3-dialog[open]::backdrop{animation:backdropIn .25s ease-out forwards}
.m3-dialog.closing::backdrop{animation:backdropOut .2s ease-in forwards}
@keyframes backdropIn{from{background:rgba(0,0,0,0);backdrop-filter:blur(0)}to{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}}
@keyframes backdropOut{from{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}to{background:rgba(0,0,0,0);backdrop-filter:blur(0)}}
.dialog-content{padding:24px}
.dialog-title{font-size:20px;font-weight:600;margin-bottom:16px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.dialog-header{display:flex;align-items:center;justify-content:space-between}
.dialog-header .dialog-title{margin-bottom:0}
.confirm-message{font-size:14px;color:var(--md-sys-color-on-surface-variant);line-height:1.6}
.history-dialog{max-width:700px;max-height:85vh}
.history-dialog .dialog-content{display:flex;flex-direction:column;max-height:85vh;overflow:hidden}
.history-dialog-body{overflow-y:auto;flex:1;margin-top:12px}
.history-dialog-meta{font-size:13px;color:var(--md-sys-color-on-surface-variant);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06)}

/* ============================================================
   Snackbar
   ============================================================ */
.m3-snackbar{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
    z-index:1000;display:flex;flex-direction:column;gap:8px;
    pointer-events:none;
}
.toast{
    background:var(--md-sys-color-surface-container-high);
    color:var(--md-sys-color-on-surface);
    padding:12px 24px;border-radius:var(--md-sys-shape-small);
    box-shadow:var(--md-sys-elevation-3);font-size:14px;font-weight:500;
    animation:toastIn .3s ease-out,toastOut .3s ease-in 2.7s forwards;
    display:flex;align-items:center;gap:8px;pointer-events:auto;
}
.toast.success{border-left:3px solid #81C784}
.toast.error{border-left:3px solid var(--md-sys-color-error)}
.toast.info{border-left:3px solid var(--md-sys-color-primary)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}

/* ============================================================
   Music Player
   ============================================================ */
.music-player{
    position:fixed;top:calc(var(--topbar-height) + 8px);right:24px;z-index:199;
    width:280px;background:var(--md-sys-color-surface-container-high);
    border-radius:var(--md-sys-shape-medium);
    box-shadow:var(--md-sys-elevation-3);border:1px solid rgba(255,255,255,.06);
    padding:16px;transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:all var(--motion-short);pointer-events:none;
}
.music-player.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.music-player-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--md-sys-color-primary)}
.music-player-header .material-symbols-rounded{font-size:22px}
.music-title{flex:1;font-size:14px;font-weight:600;color:var(--md-sys-color-on-surface)}
.music-close{background:none;border:none;color:var(--md-sys-color-on-surface-variant);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.music-close:hover{background:rgba(255,255,255,.1)}
.music-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:8px}
.music-play-btn{width:48px;height:48px;border-radius:50%;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--md-sys-elevation-1)}
.music-play-btn:hover{box-shadow:var(--md-sys-elevation-3);transform:scale(1.08)}
.music-play-btn .material-symbols-rounded{font-size:28px}
.music-ctrl-btn{background:none;border:none;color:var(--md-sys-color-on-surface-variant);cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.music-ctrl-btn:hover:not(:disabled){background:rgba(255,255,255,.1)}
.music-ctrl-btn:disabled{opacity:.3;cursor:default}
.music-ctrl-btn .material-symbols-rounded{font-size:22px}
.music-volume{display:flex;align-items:center;gap:8px;padding:0 4px}
.music-volume-slider{flex:1;position:relative;height:4px;background:var(--md-sys-color-surface-variant);border-radius:2px;cursor:pointer}
.music-volume-fill{position:absolute;top:0;left:0;height:100%;background:var(--md-sys-color-on-surface-variant);border-radius:2px;width:70%}
.music-volume-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--md-sys-color-on-surface);left:70%;opacity:0;transition:opacity var(--motion-short)}
.music-volume-slider:hover .music-volume-thumb{opacity:1}.music-volume-slider:hover{height:6px}

/* Animations */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes slideInFromCenter{0%{opacity:0;transform:translateX(-50px)}100%{opacity:1;transform:translateX(0)}}

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--md-sys-color-outline-variant);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--md-sys-color-outline)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:768px){
    .m3-sidebar{width:0;min-width:0;overflow:hidden}
    .m3-main{margin-left:0}
    .m3-topbar{padding:0 16px}
    .m3-content{padding:16px}
    .logo-title,.m3-nav-item span:not(.material-symbols-rounded),.m3-sidebar-section{display:none}
    .draw-btn{width:100px;height:100px}
    .draw-btn .material-symbols-rounded{font-size:36px}
    .result-card{flex-direction:column;text-align:center;padding:24px;min-width:auto}
}