:root{ 
    --bg:#f7f7f2;
    --bg-accent:#eef0f4;
    --panel:#ffffff;
    --panel2:#5b55c7;
    --panel3:#8178df;
    --row:#f3f4ff;
    --row-hover:#e7e8ff;
    --text:#25258b;
    --text-light:#ffffff;
    --muted:#5c5ca0;
    --border:#d6d7eb;
    --border-strong:#7269dd;
    --purple:#6758ee;
    --purple-dark:#29258d;
    --purple-light:#8b7cff;
    --green:#b7f348;
    --green-dark:#75ce67;
    --green-light:#dcff66;
    --gold:#d4af37;
    --silver:#c0c0c0;
    --bronze:#cd7f32;
    --shadow:0 4px 14px rgba(40,37,141,.18);
    --move-bg:rgba(255,255,255,.78);
    --stat-bg:rgba(255,255,255,.86);
}

body.dark{
    --bg:#17154d;
    --bg-accent:#211e68;
    --panel:#29256f;
    --panel2:#5149b7;
    --panel3:#6960cf;
    --row:#353080;
    --row-hover:#464099;
    --text:#ffffff;
    --text-light:#ffffff;
    --muted:#c9c7f4;
    --border:#514c9b;
    --border-strong:#9188ff;
    --purple:#7869ff;
    --purple-dark:#151244;
    --purple-light:#9b90ff;
    --green:#b7f348;
    --green-dark:#71d68a;
    --green-light:#dcff66;
    --gold:#d4af37;
    --silver:#c0c0c0;
    --bronze:#cd7f32;
    --shadow:0 5px 18px rgba(0,0,0,.28);
    --move-bg:rgba(24,22,65,.78);
    --stat-bg:rgba(24,22,65,.86);
}

*{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    margin:0;
    background:var(--bg);
    font-family:"Google Sans",Tahoma,Arial,sans-serif;
    color:var(--text);
}

button,
select,
textarea{
    font-family:inherit;
}

a{
    color:var(--purple-dark);
    font-weight:700;
    text-decoration-thickness:2px;
    text-underline-offset:3px;
    transition:color .15s ease,background .15s ease;
}

a:hover{
    color:var(--purple-dark);
    background:var(--green);
}

body.dark a{
    color:var(--green-light);
}

body.dark a:hover{
    color:var(--purple-dark);
    background:var(--green);
}

.window{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.titlebar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:linear-gradient(90deg,var(--purple-dark),var(--panel2));
    color:var(--text-light);
    padding:10px 14px;
    border-bottom:4px solid var(--green);
    font-weight:700;
    font-size:13px;
    letter-spacing:.03em;
    box-shadow:0 2px 8px rgba(0,0,0,.16);
}

.titlebar a{
    color:var(--green-light); 
	text-decoration: none;
}
.titlebar a:hover{
    color:#17154d;
	background: #f7f7f2;
}

body.dark .titlebar a{
    color:var(--green-light);
	text-decoration: none;
}
body.dark .titlebar a:hover{
    color:#17154d;
	background: #f7f7f2;
}



.brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.brand img{
    width:64px;
    height:64px;
    object-fit:contain;
}

.brand h1{
    margin:0;
    font-size:22px;
    line-height:1.05;
    letter-spacing:0;
}

.brand p{
    margin:4px 0 0;
    font-size:12px;
}

.header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
}

button,
select{
    transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}

button{
    min-height:34px;
    padding:7px 14px;
    background:var(--purple);
    color:var(--text-light);
    border:2px solid var(--purple);
    border-radius:999px;
    cursor:pointer;
    font-size:11px;
    font-weight:700;
}

button:hover{
    background:var(--green);
    color:var(--purple-dark);
    border-color:var(--green);
    transform:none;
    box-shadow:none;
}

button:active{
    transform:none;
    box-shadow:none;
}

button.secondary{
    background:var(--row);
    color:var(--text);
    border-color:var(--border);
}

.toggle-control{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:34px;
    padding:5px 10px;
    border:2px solid rgba(255,255,255,.28);
    border-radius:999px;
    background:rgba(255,255,255,.1);
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.toggle-control{
    cursor:pointer;
}

.toggle-control input{
    width:16px;
    height:16px;
    accent-color:var(--green);
}


.theme-toggle{
    width:36px;
    min-width:36px;
    padding:0;
    font-size:18px;
}

.content{
    flex:1;
    overflow:auto;
    width:100%;
    margin:0 auto;
    padding:14px 0 60px;
}

.sheet-wrap{
    width:1280px;
    min-width:1280px;
    margin:0 auto;
}

.team-sheet{
    width:1280px;
    height:720px;
    aspect-ratio:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:8px;
    border-radius:14px;
    background:var(--bg-accent);
    box-shadow:var(--shadow);
}

.mon-card{
    --card-bg-light:#f7f7f9;
    --card-bg-dark:#252360;
    --card-line:#9fa19f;
    position:relative;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    min-width:0;
    min-height:0;
    overflow:hidden;
    border:2px solid var(--card-line);
    border-radius:14px;
    background:var(--card-background-light,var(--card-bg-light));
    color:#17172c;
    box-shadow:0 2px 7px rgba(31,28,81,.12);
}

body.dark .mon-card{
    background:var(--card-background-dark,var(--card-bg-dark));
    color:#fff;
}

.card-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:8px;
    padding:7px 8px 3px;
}

.mon-heading{
    min-width:0;
    padding:3px 0 0 4px;
}

.mon-name-row{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
}

.title-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    object-fit:contain;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));
}

.mon-name{
    min-height:29px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:22px;
    font-weight:700;
    line-height:1.08;
}

.types{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    min-height:25px;
    margin-top:3px;
}

.type{
    --type-color:#9fa19f;
    display:none;
    grid-template-columns:25px auto;
    min-width:72px;
    min-height:25px;
    overflow:hidden;
    border-radius:999px;
    background:var(--type-color);
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.type.visible{
    display:inline-grid;
}

.type-icon-shell{
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    background:rgba(0,0,0,.12);
}

.type-icon{
    width:25px;
    height:25px;
    object-fit:contain;
}

.type-label{
    display:flex;
    align-items:center;
    padding:0 8px 0 6px;
}

.card-controls{
    display:grid;
    justify-items:end;
    gap:4px;
}

.form-toggle-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    min-height:23px;
    white-space:nowrap;
}

.cosmetic-controls{
    display:none;
    grid-column:1/-1;
    grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr);
    gap:5px;
    min-width:0;
}

body.cosmetic-mode .cosmetic-controls{
    display:grid;
}

.cosmetic-controls select,
.cosmetic-controls input{
    width:100%;
    min-width:0;
    min-height:26px;
    padding:3px 7px;
    border:2px solid var(--border);
    border-radius:7px;
    outline:none;
    background:var(--row);
    color:var(--text);
    font-size:9px;
    font-weight:700;
}

.cosmetic-controls select:hover,
.cosmetic-controls input:hover,
.cosmetic-controls select:focus,
.cosmetic-controls input:focus{
    border-color:var(--purple-light);
    background:var(--row-hover);
}

body.cosmetic-mode .mon-name{
    font-size:19px;
}

body.cosmetic-mode .mon-name.title-long{
    font-size:17px;
}

body.cosmetic-mode .mon-name.title-very-long{
    font-size:15px;
}

.background-select{
    width:124px;
    min-height:28px;
    padding:4px 20px 4px 8px;
    border:2px solid var(--border);
    border-radius:8px;
    outline:none;
    background:var(--row);
    color:var(--text);
    font-size:10px;
    font-weight:700;
}

.background-select:hover{
    border-color:var(--purple-light);
    background:var(--row-hover);
}

.mega-toggle,
.shiny-toggle{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:23px;
    padding:2px 8px;
    border:2px solid var(--border);
    border-radius:999px;
    background:var(--row);
    color:var(--text);
    cursor:pointer;
    font-size:10px;
    font-weight:700;
}

.card-body{
    display:grid;
    grid-template-columns:128px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:
        "details details"
        "sprite moves";
    column-gap:10px;
    row-gap:5px;
    min-height:0;
    padding:0 8px 4px;
}

.sprite-wrap{
    grid-area:sprite;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:128px;
    min-width:128px;
    min-height:0;
}

.mega-symbol,
.mon-sprite{
    width:128px;
    height:128px;
    min-width:128px;
    min-height:128px;
    max-width:128px;
    max-height:128px;
    object-fit:contain;
}

.mega-symbol{
    position:absolute;
    z-index:0;
    opacity:.24;
}

.mon-sprite{
    position:relative;
    z-index:1;
    display:block;
    image-rendering:pixelated;
    filter:drop-shadow(0 4px 4px rgba(25,20,75,.18));
}

.mon-sprite:not([src]){
    visibility:hidden;
}

.ball-icon-slot{
    position:absolute;
    left:0;
    bottom:0;
    z-index:3;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ball-icon{
    width:40px;
    height:40px;
    object-fit:contain;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));
}

.item-icon-slot{
    position:absolute;
    right:0;
    bottom:0;
    z-index:3;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.item-icon{
    width:40px;
    height:40px;
    object-fit:contain;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));
}

.details-column{
    grid-area:details;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:stretch;
    gap:8px;
    min-width:0;
    padding:0 2px;
}

.detail-row{
    display:grid;
    align-content:center;
    min-width:0;
    min-height:38px;
    padding:2px 4px 4px;
}

.detail-row>span{
    color:var(--muted);
    font-size:10px;
    font-weight:700;
}

.ability,
.item,
.stat-alignment{
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    font-size:14px;
    font-weight:700;
    line-height:1.05;
}

.moves{
    grid-area:moves;
    display:grid;
    align-content:center;
    gap:4px;
    min-width:0;
    width:100%;
}

.move-row{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    min-width:0;
    min-height:37px;
    overflow:hidden;
    border:2px solid var(--border);
    border-radius:8px;
    background:var(--move-bg);
}

.move-type{
    --type-color:#9fa19f;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:100%;
    min-height:35px;
    background:var(--type-color);
}

.move-type-icon{
    width:35px;
    height:35px;
    object-fit:contain;
}

.move-name{
    min-width:0;
    overflow:hidden;
    padding:5px 8px;
    white-space:normal;
    overflow-wrap:anywhere;
    font-size:16px;
    font-weight:700;
    line-height:1.05;
}

.stats{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    padding:4px 8px 7px;
}

.stats>div{
    display:grid;
    gap:1px;
    min-width:0;
    padding:4px 2px;
    border-bottom:1px solid var(--border);
    border-top:1px solid var(--border);
    border-right:1px solid var(--border);
    background:var(--stat-bg);
    text-align:center;
}

.stats>div:first-child{
    border-left:1px solid var(--border);
    border-radius:7px 0 0 7px;
}

.stats>div:last-child{
    border-radius:0 7px 7px 0;
}

.stats span{
    color:var(--muted);
    font-size:10px;
    font-weight:700;
}

.stats b{
    min-height:16px;
    overflow:hidden;
    white-space:nowrap;
    font-size:14px;
}

.stats>div.boosted span,
.stats>div.boosted b{
    color:#dc3545;
}

.stats>div.reduced span,
.stats>div.reduced b{
    color:#2474dc;
}

body.dark .stats>div.boosted span,
body.dark .stats>div.boosted b{
    color:#ff7783;
}

body.dark .stats>div.reduced span,
body.dark .stats>div.reduced b{
    color:#72adff;
}

body.hide-stats .stats{
    visibility:hidden;
    pointer-events:none;
}

[contenteditable=true]{
    outline:none;
    cursor:text;
}

[contenteditable=true]:empty::before{
    content:attr(data-placeholder);
    opacity:.4;
}

[contenteditable=true]:focus{
    border-radius:4px;
    background:rgba(183,243,72,.36);
}

.mon-card[data-bg=purple]{
    --card-bg-light:#eee9ff;
    --card-bg-dark:#29213f;
    --card-line:#7a5fe5;
}

.mon-card[data-bg=green]{
    --card-bg-light:#eef8e4;
    --card-bg-dark:#1f3324;
    --card-line:#6baf39;
}

.mon-card[data-bg=blue]{
    --card-bg-light:#eaf4ff;
    --card-bg-dark:#1d2d42;
    --card-line:#4189df;
}

.mon-card[data-bg=red]{
    --card-bg-light:#fff0ed;
    --card-bg-dark:#3c2423;
    --card-line:#e65b48;
}

.mon-card[data-bg=gold]{
    --card-bg-light:#fff8df;
    --card-bg-dark:#3b321b;
    --card-line:#c19d2d;
}

.mon-card[data-bg=dark]{
    --card-bg-light:#37364e;
    --card-bg-dark:#1d1c2c;
    --card-line:#77728e;
    color:#fff;
}

.mon-card[data-bg=light]{
    --card-bg-light:#fff;
    --card-bg-dark:#eeeeef;
    --card-line:#c7c7d2;
    color:#17172c;
}

.mon-card[data-bg="lime-purple"]{
    --card-background-light:linear-gradient(135deg,#e8ffd0,#eee5ff);
    --card-background-dark:linear-gradient(135deg,#26391d,#302449);
    --card-line:#7cbd42;
}

.mon-card[data-bg="red-blue"]{
    --card-background-light:linear-gradient(135deg,#ffd4d4,#d4e3ff);
    --card-background-dark:linear-gradient(135deg,#4b2026,#1d3152);
    --card-line:#6c62d5;
}

.mon-card[data-bg="gold-silver"]{
    --card-background-light:linear-gradient(135deg,#fff0b8,#edf0f4);
    --card-background-dark:linear-gradient(135deg,#493816,#30333a);
    --card-line:#b89b46;
}

.mon-card[data-bg="ruby-sapphire"]{
    --card-background-light:linear-gradient(135deg,#eadfff,#ded8f7);
    --card-background-dark:linear-gradient(135deg,#32264f,#282346);
    --card-line:#d95768;
}

.mon-card[data-bg="diamond-pearl"]{
    --card-background-light:linear-gradient(135deg,#dcecff,#ffe2ef);
    --card-background-dark:linear-gradient(135deg,#1d3551,#4a2538);
    --card-line:#7391c9;
}

.mon-card[data-bg="black-white"]{
    --card-background-light:linear-gradient(135deg,#c9cbd1,#ffffff);
    --card-background-dark:linear-gradient(135deg,#17181d,#4a4c54);
    --card-line:#747680;
}

.mon-card[data-bg="scarlet-violet"]{
    --card-background-light:linear-gradient(135deg,#ffd5d8,#e8dcff);
    --card-background-dark:linear-gradient(135deg,#4b2025,#30234d);
    --card-line:#8d5bc7;
}

.mon-card[data-bg="xy"]{
    --card-background-light:linear-gradient(135deg,#dce9ff,#ffd9d9);
    --card-background-dark:linear-gradient(135deg,#1d3152,#4a2026);
    --card-line:#5b69d8;
}

.mon-card[data-bg="sun-moon"]{
    --card-background-light:linear-gradient(135deg,#fff0b8,#dcd7ff);
    --card-background-dark:linear-gradient(135deg,#4a3517,#25214f);
    --card-line:#e98b38;
}

.mon-card[data-bg="sword-shield"]{
    --card-background-light:linear-gradient(135deg,#d9f3ff,#ffd8ed);
    --card-background-dark:linear-gradient(135deg,#16394a,#4a1f38);
    --card-line:#3b9bd5;
}

.mon-card[data-bg="arceus"]{
    --card-background-light:linear-gradient(135deg,#e8f0e8,#d8e7df);
    --card-background-dark:linear-gradient(135deg,#26352d,#1c2a25);
    --card-line:#8b7250;
}

.mon-card[data-bg="za"]{
    --card-background-light:linear-gradient(135deg,#d9f5eb,#e5ddff);
    --card-background-dark:linear-gradient(135deg,#173b31,#30254d);
    --card-line:#55b99a;
}

.mon-card[data-bg="gameboy"]{
    --card-background-light:linear-gradient(135deg,#d7e0a5,#a8b66f);
    --card-background-dark:linear-gradient(135deg,#354024,#202817);
    --card-line:#596442;
}

.type.normal,
.move-type.normal{--type-color:#9fa19f}

.type.fire,
.move-type.fire{--type-color:#e62829}

.type.fighting,
.move-type.fighting{--type-color:#ff8000}

.type.water,
.move-type.water{--type-color:#2980ef}

.type.flying,
.move-type.flying{--type-color:#81b9ef}

.type.grass,
.move-type.grass{--type-color:#3fa129}

.type.poison,
.move-type.poison{--type-color:#9141cb}

.type.electric,
.move-type.electric{--type-color:#fac000}

.type.ground,
.move-type.ground{--type-color:#915121}

.type.psychic,
.move-type.psychic{--type-color:#ef4179}

.type.rock,
.move-type.rock{--type-color:#afa981}

.type.ice,
.move-type.ice{--type-color:#3dcef3}

.type.bug,
.move-type.bug{--type-color:#91a119}

.type.dragon,
.move-type.dragon{--type-color:#5060e1}

.type.ghost,
.move-type.ghost{--type-color:#704170}

.type.dark,
.move-type.dark{--type-color:#624d4e}

.type.steel,
.move-type.steel{--type-color:#60a1b8}

.type.fairy,
.move-type.fairy{--type-color:#ef70ef}

.type.stellar,
.move-type.stellar{--type-color:#40b5a5}

.hidden{
    display:none!important;
}

.team-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(21,18,68,.74);
    opacity:1;
    transition:opacity .18s ease;
}

.team-modal.hidden{
    pointer-events:none;
    opacity:0;
}

.team-box{
    width:min(650px,100%);
    padding:20px;
    border:2px solid var(--border-strong);
    border-radius:18px;
    background:var(--panel);
    color:var(--text);
    box-shadow:var(--shadow);
}

.team-box h2{
    margin:0 0 12px;
}

#teamInput{
    width:100%;
    height:330px;
    resize:vertical;
    padding:12px;
    border:2px solid var(--border);
    border-radius:8px;
    outline:none;
    background:var(--row);
    color:var(--text);
    font-family:monospace;
    font-size:13px;
}

#teamInput:hover{
    border-color:var(--purple-light);
    background:var(--row-hover);
}

#teamInput:focus{
    border-color:var(--green-dark);
    box-shadow:0 0 0 3px rgba(183,243,72,.3);
}

#loadMessage{
    min-height:18px;
    margin:9px 0 0;
    color:#d33d3d;
    font-size:12px;
    font-weight:700;
}

.team-actions{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
}

.exporting .editor-control{
    display:none!important;
}

.exporting [contenteditable=true]{
    background:transparent!important;
    caret-color:transparent!important;
}

.export-stage{
    position:fixed;
    left:-100000px;
    top:0;
    overflow:hidden;
    margin:0;
    padding:0;
}

.export-stage .team-sheet{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    border-radius:0;
    box-shadow:none;
    background:var(--bg-accent);
}

.export-stage .mon-card{
    box-shadow:none;
}

body.transparent-background .team-sheet{
    background:transparent;
    box-shadow:none;
}

::selection{
    background:var(--green);
    color:var(--purple-dark);
}

::-webkit-scrollbar{
    width:12px;
    height:12px;
}

::-webkit-scrollbar-track{
    background:var(--bg-accent);
}

::-webkit-scrollbar-thumb{
    background:var(--purple);
    border:3px solid var(--bg-accent);
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--green-dark);
}

@media(max-width:680px){
    .titlebar{
        align-items:flex-start;
        flex-direction:column;
    }

    .header-actions{
        width:100%;
        justify-content:flex-start;
    }

    .content{
        padding:8px 4px 30px;
    }

    .team-modal{
        align-items:flex-start;
    }
}

.sheet-wrap{
    width:max-content;
    min-width:0;
    margin-inline:auto;
}

.team-sheet[data-layout="3x2"]{
    width:1280px;
    height:720px;
}

.team-sheet[data-layout="2x3"]{
    width:854px;
    height:1080px;
}

body.hide-stats .team-sheet[data-layout="3x2"]{
    height:720px;
}


.background-select{
    display:none;
}

body.individual-themes .background-select{
    display:block;
}

.cosmetic-controls{
    grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr);
}

.cosmetic-controls .form-select.hidden{
    display:none;
}

body.cosmetic-mode .team-sheet[data-layout="3x2"]{
    height:820px;
}

body.cosmetic-mode .team-sheet[data-layout="2x3"]{
    height:1230px;
}

body.cosmetic-mode .cosmetic-controls:not(:has(.form-select:not(.hidden))){
    grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr);
}