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

body{

    background:#0f1117;

    color:white;

    font-family:
    Inter,
    system-ui,
    sans-serif;

}

.hidden{

    display:none;

}

.screen{

    position:fixed;
    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#0f1117;

    z-index:100;

}

.login-card{

    width:90%;

    max-width:400px;

    background:#181b22;

    border-radius:20px;

    padding:30px;

}

.login-card h1{

    text-align:center;

    margin-bottom:5px;

}

.login-card p{

    text-align:center;

    color:#999;

    margin-bottom:20px;

}

select,
input,
button{

    width:100%;

    padding:15px;

    margin-top:15px;

    border:none;

    border-radius:12px;

    font-size:16px;

}

select,
input{

    background:#242833;

    color:white;

}

button{

    background:#3b82f6;

    color:white;

    cursor:pointer;

    font-weight:bold;

}

header{

    padding:25px;

    border-bottom:1px solid #2b2f39;

}

header h2{

    font-size:24px;

}

main{

    padding:20px;

    min-height:calc(100vh - 140px);

}

nav{

    position:fixed;

    bottom:0;

    width:100%;

    display:flex;

    background:#181b22;

    border-top:1px solid #2b2f39;

    padding-bottom: env(safe-area-inset-bottom);

}

nav button{

    flex:1;

    background:none;

    color:white;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

    padding:12px;

}

nav button span{

    font-size:12px;

}

#login-error{

    color:#ff5a5a;

    margin-top:15px;

}

.day-title{

    margin-top:25px;
    margin-bottom:15px;

    color:#60a5fa;

}

.stage-card{

    background:#181b22;

    border-radius:18px;

    padding:18px;

    margin-bottom:20px;

}

.stage-card h3{

    margin-bottom:15px;

}

.artist-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.artist{

    background:#262c38;

    color:white;

    text-align:left;

    padding:15px;

    border-radius:12px;

    transition:.2s;

}

.artist.selected{

    background:#2563eb;

}

.artist {

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.artist-users {

    display: flex;
    gap: 6px;

}

.user-dot {

    width: 14px;
    height: 14px;
    border-radius: 50%;

}

.artist-toolbar {

    margin-bottom: 24px;

}

#artist-search {

    width: 100%;

    padding: 14px;

    border-radius: 12px;

    border: none;

    background: #262c38;

    color: white;

    font-size: 16px;

}

.schedule-card{

    background:#222a35;

    border-radius:14px;

    padding:16px;

    margin-bottom:14px;

}

.schedule-time{

    color:#ffb347;

    font-size:14px;

    font-weight:bold;

    margin-bottom:8px;

}

.schedule-artist{

    font-size:18px;

    font-weight:bold;

}

.schedule-stage{

    color:#9aa4b2;

    margin-top:4px;

}

.clashes {

    margin-bottom: 30px;

}

.clash-card {

    background: #5a1f1f;

    border-left: 5px solid #ff5555;

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 12px;

}

.clash-card strong {

    color: #ff8080;

}

.place-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-bottom: 30px;

}

.place {

    background: #1a1f2b;

    color: #e6e9ef;

    border: 2px solid transparent;

    border-radius: 12px;

    padding: 14px 10px;

    font-size: 15px;

    cursor: pointer;

}

.place.selected {

    border-color: #4f8cff;

    background: #1f2c47;

    font-weight: bold;

}

.location-card {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #1a1f2b;

    border-radius: 12px;

    padding: 14px 16px;

    margin-bottom: 10px;

}

.location-card.stale {

    opacity: 0.5;

}

.location-card-main small {

    display: block;

    color: #9aa4b2;

    margin-top: 4px;

}

.location-time {

    color: #9aa4b2;

    font-size: 13px;

    white-space: nowrap;

}

.view-toggle {

    display: flex;

    gap: 8px;

    margin-bottom: 20px;

}

.view-toggle button {

    flex: 1;

    background: #1a1f2b;

    color: #9aa4b2;

    border: 2px solid transparent;

    border-radius: 12px;

    padding: 10px;

    font-size: 15px;

    cursor: pointer;

}

.view-toggle button.active {

    color: #e6e9ef;

    border-color: #4f8cff;

    font-weight: bold;

}

.timeline-scroll {

    overflow-x: auto;

    margin-bottom: 24px;

    -webkit-overflow-scrolling: touch;

}

.timeline-inner {

    position: relative;

}

.timeline-ruler {

    position: relative;

    height: 24px;

}

.timeline-hour {

    position: absolute;

    top: 0;

    color: #9aa4b2;

    font-size: 12px;

    border-left: 1px solid #2a3040;

    padding-left: 4px;

    height: 24px;

}

.timeline-row {

    display: flex;

    align-items: stretch;

    margin-bottom: 8px;

}

.timeline-stage {

    position: sticky;

    left: 0;

    z-index: 2;

    width: 112px;

    min-width: 112px;

    background: #0f1117;

    color: #9aa4b2;

    font-size: 13px;

    font-weight: bold;

    padding: 8px 8px 8px 0;

}

.timeline-track {

    position: relative;

    flex: 1;

    min-height: 72px;

    background: #141824;

    border-radius: 8px;

}

.timeline-block {

    position: absolute;

    top: 4px;

    bottom: 4px;

    background: #1f2637;

    border: 2px solid #2a3348;

    border-radius: 8px;

    padding: 6px 8px;

    overflow: hidden;

    box-sizing: border-box;

}

.timeline-block-name {

    font-size: 13px;

    font-weight: bold;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.timeline-block-time {

    font-size: 11px;

    color: #9aa4b2;

}

.timeline-block.mine {

    border-color: #4f8cff;

    background: #1f2c47;

}

.timeline-block.clashing {

    border-color: #ff5555;

    background: #3a2028;

}

.tba-title {

    color: #9aa4b2;

}

.settings-card {

    background: #1a1f2b;

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 24px;

}

.settings-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 14px 0;

}

.settings-card input[type="text"] {

    flex: 1;

    background: #141824;

    color: #e6e9ef;

    border: 1px solid #2a3040;

    border-radius: 8px;

    padding: 10px;

}

.settings-card input[type="color"] {

    width: 44px;

    height: 36px;

    border: none;

    background: none;

    cursor: pointer;

}

.settings-card button {

    background: #4f8cff;

    color: #fff;

    border: none;

    border-radius: 8px;

    padding: 10px 16px;

    font-size: 14px;

    cursor: pointer;

}

.settings-card button.danger {

    background: #5a1f1f;

    color: #ff8080;

    margin-top: 10px;

}

#settings-msg {

    color: #9aa4b2;

    margin: 10px 0 0;

}

#content {

    padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

.app-version {

    text-align: center;

    color: #3a4152;

    font-size: 11px;

    margin-top: 10px;

    user-select: none;
}