/* ── Inställningar (the settings window: Bakgrund / Layout / Mina bilder) in the cosy look ─────────
   Loaded after cozy.css. Classic is untouched: everything is keyed on body:not([data-look="classic"]). */
body:not([data-look="classic"]) .bgm-modal{background:var(--cz-bg);border-radius:1.8rem;box-shadow:0 1.2rem 3.2rem rgba(60,40,10,.24),0 .2rem .6rem rgba(60,40,10,.08)}
body:not([data-look="classic"]) .bgm-head{border-bottom:none;padding:1.2rem 1.5rem .4rem;background:transparent}
body:not([data-look="classic"]) .bgm-title{font-size:1.3rem;font-weight:800}
body:not([data-look="classic"]) .bgm-tabs{border-bottom:none;padding:.4rem 1.5rem .7rem;gap:.4rem;flex-wrap:wrap}
body:not([data-look="classic"]) .bgm-tab{display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:.5rem 1rem;border:none;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 .1rem .4rem rgba(0,0,0,.06);color:var(--font-sub);transition:background .15s,color .15s,transform .15s}
body:not([data-look="classic"]) .bgm-tab:hover{color:var(--font);transform:translateY(-1px)}
body:not([data-look="classic"]) .bgm-tab.is-on{background:var(--main);color:#fff;box-shadow:0 .3rem .85rem rgba(57,176,187,.38);transform:none}
body:not([data-look="classic"]) .bgm-tab::before{font-family:'Material Icons Outlined';font-weight:normal;font-size:1.15rem;line-height:1;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';color:var(--main)}
body:not([data-look="classic"]) .bgm-tab.is-on::before{color:#fff}
body:not([data-look="classic"]) .bgm-tab[data-tab="bg"]::before{content:'wallpaper'}
body:not([data-look="classic"]) .bgm-tab[data-tab="layout"]::before{content:'dashboard_customize'}
body:not([data-look="classic"]) .bgm-tab[data-tab="images"]::before{content:'photo_library'}
body:not([data-look="classic"]) #bgm-pane-bg{background:transparent}
body:not([data-look="classic"]) .bgm-body{padding:.4rem 1.5rem 1.5rem}
body:not([data-look="classic"]) .bgm-scroll-hint{background:linear-gradient(transparent,#ebf7f8 45%)}

/* the Layout tab: every group is a card with a readable title and an icon */
body:not([data-look="classic"]) .kk-settings--embedded .kk-settings-section{background:#fff;border-bottom:none;border-radius:1.15rem;box-shadow:var(--cz-shadow);margin:0 0 .7rem;padding:.9rem 1.05rem .75rem}
body:not([data-look="classic"]) .kk-settings--embedded .kk-settings-section h3{display:flex;align-items:center;gap:.55rem;font-size:.95rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--font);margin:0 0 .65rem}
body:not([data-look="classic"]) .kk-settings--embedded .kk-settings-section h3::before{content:'tune';font-family:'Material Icons Outlined';font-weight:normal;font-size:1.1rem;line-height:1;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';display:grid;place-items:center;flex-shrink:0;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--main-sub);color:var(--main)}
body:not([data-look="classic"]) #look-section h3::before{content:'auto_awesome'}
body:not([data-look="classic"]) #settings-style-lbl::before{content:'palette'}
body:not([data-look="classic"]) #settings-layout-lbl::before{content:'dashboard'}
body:not([data-look="classic"]) #settings-toolbar-lbl::before{content:'apps'}
/* the same card look for the corner drawer */
body:not([data-look="classic"]) .kk-settings-section h3{color:var(--font)}

/* rows: label in normal ink, a roomier tap target */
body:not([data-look="classic"]) .kk-settings .tog-row{padding:.2rem 0;min-height:2.3rem}
body:not([data-look="classic"]) .kk-settings .tog-row>div{font-size:.86rem!important;color:var(--font)!important}
body:not([data-look="classic"]) .kk-settings .tog-row+.tog-row{border-top:1px solid rgba(0,0,0,.05)}
body:not([data-look="classic"]) .kk-settings #settings-lockhint,body:not([data-look="classic"]) .kk-settings #settings-toolbar-desc{font-size:.75rem!important;line-height:1.45!important}

/* "Stil på rutor": bigger tiles, the chosen one is clearly marked */
body:not([data-look="classic"]) #skin-grid{gap:.5rem!important}
body:not([data-look="classic"]) #skin-grid .skin-opt{position:relative;padding:.7rem .6rem!important;border-radius:.95rem!important;font-size:.8rem!important;font-weight:600;transition:transform .15s,box-shadow .15s}
body:not([data-look="classic"]) #skin-grid .skin-opt:hover{transform:translateY(-2px);box-shadow:var(--cz-shadow-lift)}
body:not([data-look="classic"]) #skin-grid .skin-opt.active{outline:2.5px solid var(--main);outline-offset:2px}
body:not([data-look="classic"]) #skin-grid .skin-opt.active::after{content:'check';font-family:'Material Icons Outlined';font-size:.85rem;line-height:1;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';position:absolute;top:-.4rem;right:-.4rem;display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--main);color:#fff}
@media (prefers-reduced-motion:reduce){body:not([data-look="classic"]) .bgm-tab,body:not([data-look="classic"]) #skin-grid .skin-opt{transition:none}}
body:not([data-look="classic"]) .kk-settings--embedded .kk-settings-body{padding:0}

/* ── Mina bilder (the third tab, and the same pieces in the picker) ── */
body:not([data-look="classic"]) #bgm-pane-images{padding-top:.2rem}
body:not([data-look="classic"]) .mi-actions{gap:.45rem;margin-bottom:.7rem;padding:.75rem .8rem;background:#fff;border-radius:1.15rem;box-shadow:var(--cz-shadow)}
body:not([data-look="classic"]) .mi-act{border:none;background:var(--main-sub);color:var(--font);padding:.45rem .95rem;font-size:.8rem;transition:background .15s,transform .15s}
body:not([data-look="classic"]) .mi-act:hover{background:var(--main);color:#fff;transform:translateY(-1px)}
body:not([data-look="classic"]) .mi-act:hover .material-icons-outlined{color:#fff}
body:not([data-look="classic"]) .mi-usage{flex-basis:100%;margin-left:0;font-size:.72rem;color:var(--font-sub);font-weight:600}
body:not([data-look="classic"]) .mi-folder-bar{gap:.4rem;margin-bottom:.7rem}
body:not([data-look="classic"]) .mi-folder-tab{border:none;background:#fff;box-shadow:0 .1rem .4rem rgba(0,0,0,.07);padding:.35rem .85rem;font-size:.75rem;font-weight:600;transition:background .15s,color .15s}
body:not([data-look="classic"]) .mi-folder-tab:hover{background:var(--main-sub);color:var(--font)}
body:not([data-look="classic"]) .mi-folder-tab.is-active{background:var(--main);color:#fff;box-shadow:0 .25rem .7rem rgba(57,176,187,.35)}
body:not([data-look="classic"]) .mi-upload-zone{padding:1.4rem 1rem;border:2.5px dashed rgba(57,176,187,.45);border-radius:1.3rem;background:rgba(255,255,255,.7);gap:.5rem}
body:not([data-look="classic"]) .mi-upload-zone>.material-icons-outlined{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--main-sub);color:var(--main)!important;font-size:1.7rem!important}
body:not([data-look="classic"]) .mi-upload-zone:hover,body:not([data-look="classic"]) .mi-drag{border-color:var(--main);background:var(--main-sub)}
body:not([data-look="classic"]) .mi-drop-txt{font-size:.8rem;font-weight:600;color:var(--font-sub)}
body:not([data-look="classic"]) .mi-grid{grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr));gap:.55rem;margin-top:.8rem;max-height:20rem;padding:.2rem}
body:not([data-look="classic"]) .mi-thumb{border-radius:1rem;box-shadow:var(--cz-shadow);transition:transform .15s,box-shadow .15s}
body:not([data-look="classic"]) .mi-thumb:hover{transform:translateY(-2px);box-shadow:var(--cz-shadow-lift)}
body:not([data-look="classic"]) .mi-del,body:not([data-look="classic"]) .mi-move{width:1.7rem;height:1.7rem;top:.3rem;background:rgba(255,255,255,.92);color:var(--font);box-shadow:0 .1rem .4rem rgba(0,0,0,.25)}
body:not([data-look="classic"]) .mi-del{right:.3rem}
body:not([data-look="classic"]) .mi-move{left:.3rem}
body:not([data-look="classic"]) .mi-del:hover{background:var(--danger);color:#fff}
body:not([data-look="classic"]) .mi-move:hover{background:var(--main);color:#fff}
body:not([data-look="classic"]) .mi-empty{padding:1.2rem .5rem;font-size:.82rem;font-weight:600}
@media (hover:none){body:not([data-look="classic"]) .mi-del,body:not([data-look="classic"]) .mi-move{opacity:1}}
@media (prefers-reduced-motion:reduce){body:not([data-look="classic"]) .mi-act,body:not([data-look="classic"]) .mi-thumb,body:not([data-look="classic"]) .mi-folder-tab{transition:none}}

/* the Layout / Mina bilder window: a little wider and taller, so more fits without scrolling */
body:not([data-look="classic"]) .bgm-backdrop.bgm-compact{padding:3.5rem 1.5rem 1rem 0}
body:not([data-look="classic"]) .bgm-backdrop.bgm-compact .bgm-modal{width:min(29rem,calc(100vw - 2rem));max-height:calc(100vh - 4.5rem);min-height:min(40rem,calc(100vh - 4.5rem))}
body:not([data-look="classic"]) .bgm-backdrop:not(.bgm-compact) .mi-grid{max-height:none;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr))}