:root {
    --primary-color: #1d5c89;
    --background-color: #ffffff;
    --text-color: #333333;
    --border-color: #e0e0e0;
    --modal-background: rgba(0, 0, 0, 0.5);
    --player-height: 80px;
    --danger-color: #ff4d4d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-color);
    background: var(--background-color);
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}

#app {
    min-height: 100vh;
    padding-bottom: var(--player-height);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--primary-color);
    color: white;
}

header h1 {
    font-size: 1.5rem;
    font-weight: 500;
}

header h1::before {
    content: '';
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: bottom;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%0A%20%20%3Cpath%20d=%22M%204.9%2019.3%20Q%201.3%2018.9%200.3%2015.4%20Q%20-0.5%2012.1%202.5%209.9%20Q%202.3%208%203.4%207.1%20Q%204.6%206%206.2%206.7%20Q%207.3%203.6%2010.7%202.7%20Q%2014%202.1%2015.9%203.7%20Q%2020%203%2023.1%200.2%20Q%2023.8%20-0.1%2023.7%200.8%20Q%2022.6%204.3%2015.8%205.5%20L%2015.8%206%20Q%2020%205.6%2023%203.1%20Q%2023.6%203%2023.5%203.7%20Q%2022.4%206.9%2015.8%207.6%20L%2015.8%208.1%20Q%2020%208%2022.2%206.2%20Q%2022.8%206.1%2022.5%206.8%20Q%2021.3%209.4%2015.8%209.5%20L%2015.8%2010.1%20Q%2018.6%2010.1%2019.4%209.9%20Q%2022.2%2012%2021.8%2015%20Q%2021.3%2018.4%2017.4%2019.3%20L%2014.9%2012%20L%2014.9%204.5%20Q%2014.7%203.7%2014%203.75%20L%208.1%205.75%20Q%207.3%206%207.15%206.8%20L%207.15%2012.3%20Q%205.5%2012.1%204.7%2013.3%20Q%204%2014.4%204.8%2015.6%20Q%205.7%2016.7%207.3%2016.3%20Q%208.7%2015.8%209.1%2014.2%20L%209.1%208.2%20L%2013%206.9%20L%2013%2010.1%20Q%2010.9%2010%2010.3%2011.8%20Q%2010%2013.2%2011.4%2013.9%20Q%2013.2%2014.6%2014.2%2013.4%20Q%2014.7%2012.9%2014.9%2011.9%20L%2017.4%2019.3%20Z%20M%207.7%207%20Q%207.8%206.6%208.2%206.4%20L%2014%204.45%20Q%2014.2%204.4%2014.2%204.7%20L%2014.2%2011.7%20Q%2014.1%2013.3%2012.5%2013.5%20Q%2011.0%2013.5%2011%2012.1%20Q%2011%2011.3%2011.9%2010.9%20Q%2012.8%2010.6%2013.6%2010.9%20L%2013.6%206.3%20Q%2013.6%206%2013.2%206.2%20L%208.6%207.7%20Q%208.4%207.8%208.4%208%20L%208.4%2013.8%20Q%208.3%2015.4%206.6%2015.75%20Q%205.2%2015.7%205.05%2014.6%20Q%204.8%2013.7%205.8%2013.1%20Q%206.6%2012.7%207.7%2013%20Z%22%0A%20%20%20%20%20%20%20%20fill=%22white%22%0A%20%20%20%20%20%20%20%20stroke=%22none%22/%3E%0A%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 6px;
}

.icon-button {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-button.large {
    padding: 1rem;
}

#breadcrumb {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#currentPath::before {
    content: '現在: ';
}

#fileList {
    padding: 1rem;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y pinch-zoom;
    transition: transform 0.3s ease;
}

.file-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.file-item svg {
    flex-shrink: 0;
}

.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
}

.spinner {
    animation: rotate 2s linear infinite;
    width: 50px;
    height: 50px;
}

.spinner .path {
    stroke: var(--primary-color);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-background);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 1rem;
    overflow-y: auto;
}

.close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.album-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#newAlbumName {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

#createAlbum, #searchMusic {
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.album-item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.album-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

#player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--player-height);
    background: white;
    border-top: 1px solid var(--border-color);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    z-index: 900;
}

.now-playing {
    display: flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loading-indicator {
    display: none;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 2rem);
    height: 4px;
    background: var(--border-color);
    cursor: pointer;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill {
    width: 0;
    height: 100%;
    background: var(--primary-color);
    transition: width 0.1s linear;
}

.controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.message {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    z-index: 2000;
    transition: opacity 0.3s ease;
}

.message.fade-out {
    opacity: 0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #121212;
        --text-color: #ffffff;
        --border-color: #333333;
    }
}

/* 確認モーダル用のスタイル */
.confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-background);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.confirm-modal-content {
    background: var(--background-color);
    padding: 1.5rem;
    border-radius: 8px;
    max-width: 90%;
    width: 400px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.confirm-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.confirm-modal-buttons button {
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.confirm-modal-buttons button.danger-button {
    background: var(--danger-color);
}