/* ===================================
   General
=================================== */
:root{
    --paper:        #fbfaf8;
    --bg:           #fff;
    --lav:          #d9cde4;
    --pink:         #fadee7;
    --blue:         #edf2f6;
    --line:         #eadcf2;
    --text:         #6f6f78;
}

*{
  box-sizing:       border-box;}

body{
  margin:           0;
  padding:          16px;
  background:       var(--paper);
  font:             11px/1.7 "Open Sans",sans-serif;color:var(--text);}

hr{
  border:           none;
  border-top:       1px dashed var(--line);
  margin:           18px 0;
}

/* ===================================
    Containers
=================================== */
#aboutcontainer{
  width:            600px;
  max-width:        600px;
  margin:           auto;}


  
/* ===================================
   Hero
=================================== */
.abouthero{
  display:          grid;
  grid-template-columns:180px 1fr;
  gap:              18px;
  background:       var(--bg);
  border:           1px solid var(--line);
  border-radius:    14px;
  padding:          16px;
  position:         relative;
}

.abouttape{
  position:         absolute;
  top:              -8px;
  left:             24px;
  background:       var(--pink);
  padding:          3px 12px;
  font-size:        10px;
  letter-spacing:   2px;
  transform:        rotate(-2deg);
}

.aboutphoto{
  height:           270px;
  border:           2px dashed var(--lav);
  border-radius:    10px;
  background:       var(--blue);
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.abouttagline{
  font-style:       italic;
  margin-top:       -5px;
  margin-bottom:    10px;
  font-size:        10px;
  text-align:       right;
}

.color-palette{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:18px;
}

.color-chip{
    width:26px;
    height:26px;
    border-radius:8px;
    border:1px solid var(--border);
}

/* ===================================
   Folder Tabs
=================================== */
.tab{
    appearance:none;
    border:none;
    cursor:pointer;
    font:inherit;
    padding:10px 18px;
    border-radius:12px 12px 0 0;
    border:1px solid var(--line);
    border-bottom:none;
    color:#666;
    position:relative;
    transition:
        background .25s,
        transform .2s,
        box-shadow .2s,
        color .2s;
    gap:4px;
    margin-top:18px;

}

.tabs .tab{
    border:none;
    cursor:pointer;
    padding:10px 18px;
    border-radius:12px 12px 0 0;
    transition:.25s;
    font:inherit;
}

.tab:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
    box-shadow:
        0 -2px 6px rgba(0,0,0,.06);
}

.tab.active{
    font-weight:        600;
    color:              #555;
    filter:             brightness(1.06);
    box-shadow:         0 -3px 8px rgba(0,0,0,.08);
    z-index:            10;
    transition:         all .25s ease;
}

.tabs .tab:nth-child(1){background:#F8D9E6;}
.tabs .tab:nth-child(2){background:#DDE9F8;}
.tabs .tab:nth-child(3){background:#D8ECD9;}
.tabs .tab:nth-child(4){background:#F6E4BF;}
.tabs .tab:nth-child(5){background:#E8D8F5;}
.tabs .tab:nth-child(6){background:#F7E7D8;}

.content{
    background:white;
    border:1px solid var(--line);
    border-radius:0 14px 14px 14px;
    padding:20px;
    margin-top:-1px;
}

.panel{
    display:none;
    animation:fade .3s;
}

.panel.active{
    display:block;
}

/* ===================================
    Random
=================================== */
@keyframes f{
  from{
    opacity:        0;}
  to{
    opacity:        1;}
}

.paper{
  padding:          18px;
}

.grid{
  display:          grid;
  grid-template-columns:repeat(2,1fr);
  gap:              12px;
}

.inventory{
  display:          grid;
  grid-template-columns:repeat(3,1fr);
  gap:              10px;
  text-align:       center;
}

.slot{
  background:       var(--blue);
  padding:          14px;
  border-radius:    10px;
}

/* ===================================
   About Folder
=================================== */
.about-list{
    list-style:none;
    padding:0;
    margin:15px 0 0;
}

.about-list li{
    margin-bottom:8px;
    display:flex;
    align-items:center;
}

.about-list.likes li::before{
    content:"✓";
    color:#51b86d;
    font-weight:bold;
    margin-right:10px;
}

.about-list.dislikes li::before{
    content:"✕";
    color:#d86565;
    font-weight:bold;
    margin-right:10px;
}

.about-label{
    display:inline-block;
    background:var(--pink);
    padding:3px 12px;
    border-radius:4px;
    font-size:10px;
    letter-spacing:2px;
    margin-bottom:12px;
    transform:rotate(-2deg);
    font-weight:bold;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:10px;
}

.about-card{
    position:relative;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px;
}

.about-card p{
    margin:0 0 10px;
}

.about-label{
    display:inline-block;
    background:var(--pink);
    padding:4px 12px;
    border-radius:5px;
    font-size:10px;
    letter-spacing:2px;
    font-weight:bold;
    transform:rotate(-2deg);
    margin-bottom:14px;
}

/* ===================================
   Facts Folder
=================================== */
.faq-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.faq-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px;
}

.faq-question{
    border-top:1px dashed var(--line);
    padding:12px 0;
}

.faq-question:first-of-type{
    border-top:none;
}

.faq-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    font-weight:600;
}

.faq-arrow{
    transition:.25s;
    color:#999;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:.3s;
    padding-left:18px;
    color:#777;
    line-height:1.8;
}

.faq-question.open .faq-answer{
    max-height:180px;
    overflow-y:auto;
    margin-top:2px;
    padding-right:0px;
}

.faq-answer::-webkit-scrollbar{
    width:6px;
}

.faq-answer::-webkit-scrollbar-track{
    background:transparent;
}

.faq-answer::-webkit-scrollbar-thumb{
    background:var(--lav);
    border-radius:10px;
}

.faq-answer{
    scrollbar-width:thin;
    scrollbar-color:var(--lav) transparent;
}

.faq-question.open .faq-arrow{
    transform:rotate(90deg);
}

/* ===================================
   Playlist Folder
=================================== */
.music-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:12px;
    padding:20px;
}

.music-song{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 0;

    border-top:1px dashed var(--line);

    text-decoration:none;

    color:inherit;
wo
    transition:.25s;
}

.music-song:first-of-type{
    border-top:none;
}

.music-song:hover{
    padding-left:8px;
    color:#9c83b0;
}

.music-song small{
    opacity:.7;
}

/* ===================================
   Travel Folder
=================================== */
.travel-header{
    text-align:center;
    margin-bottom:25px;
}

.travel-header p{
    max-width:420px;
    margin:12px auto 0;
    color:#777;
    line-height:1.7;
}

/* ---------- Map ---------- */
.travel-map-wrapper{
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px;
    margin-bottom:25px;
    height:320px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

#worldmap{
    width:100%;
    height:100%;
}

#worldmap svg{
    width:100%;
    height:100%;
    display:block;
}

/* ---------- Country Information ---------- */
.travel-info{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px;
    margin-bottom:25px;
}

.travel-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-top:15px;
}

.travel-section h4{
    margin:0 0 10px;
    font-size:12px;
    letter-spacing:1px;
    color:#777;
}

.travel-section ul{
    margin:0;
    padding-left:18px;
    line-height:1.9;
}

.travel-section li{
    margin-bottom:4px;
}

/* ---------- Stats ---------- */
.travel-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.travel-stat{
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    padding:15px;
    text-align:center;
    transition:.25s;
}

.travel-stat:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,.05);
}

.travel-stat span{
    display:block;
    font-size:22px;
    margin-bottom:6px;
}

.travel-stat strong{
    display:block;
    font-size:18px;
    color:#666;
    margin-bottom:4px;
}

.travel-stat small{
    color:#888;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
}

/* ---------- SVG Countries ---------- */
.visited{
    fill:#e7c9d8 !important;
    cursor:pointer;
    transition:.25s;
}

.visited:hover{
    fill:#d9cde4 !important;
}

.travel-pin{
    fill:#d57b9a;
    stroke:white;
    stroke-width:2;
    cursor:pointer;
    transition:.2s;
}

.travel-pin:hover{
    fill:#c55f84;
    transform-origin:center;
    transform:scale(1.3);
}

.travel-pin-shadow{
    fill:rgba(0,0,0,.12);
}

.travel-pin{
    cursor:pointer;
    transition:.2s;
}

.travel-pin:hover{
    transform-origin:center;
}

.travel-pin circle{
    transition:.2s;
}

.travel-pin:hover circle{
    r:7;
}

.travel-scroll{

    max-height:180px;

    overflow-y:auto;

    padding-right:6px;

}

.travel-scroll::-webkit-scrollbar{

    width:6px;

}

.travel-scroll::-webkit-scrollbar-thumb{

    background:var(--lav);

    border-radius:10px;

}


/* ---------- Tooltip ---------- */
#travelTooltip{
    position:fixed;
    display:none;
    pointer-events:none;
    background:white;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    font-size:11px;
    line-height:1.6;
    z-index:9999;
    max-width:220px;
}


/* ===================================
   Bag Folder
=================================== */

/* ===================================
   Pixel Folder
=================================== */

/* ===================================
   Animations
=================================== */