﻿
    /* Planning page styles */
    #planning-page { position:fixed; inset:0; background:#f4f7ff; display:none; z-index:99999; overflow:auto; }
    #planning-page .page-inner { max-width:1100px; margin:30px auto; padding:20px; }
    #planning-page .page-header { font-weight:600; margin-bottom:18px; display:flex; justify-content:space-between; align-items:center; }
    #planning-page .page-header button { background:#1C77FF; color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; }

    .planning-center { display:flex; gap:24px; align-items:flex-start; justify-content:center; }
    .planning-card { background:linear-gradient(180deg,#fff,#fcfcff); border-radius:16px; padding:18px; display:flex; gap:12px; align-items:center; min-width:560px; box-shadow:0 6px 20px rgba(20,40,80,0.08); }
    .planning-card .col { padding:10px 12px; border-radius:8px; background:transparent; min-width:120px; text-align:center; }
    .planning-card .col.num { width:80px; font-weight:700; }
    .planning-card .col.date { width:140px; }
    .planning-card .col.dropzone { flex:1; min-height:90px; border:2px dashed #cfcfcf; background:#fff; display:flex; align-items:center; justify-content:center; }
    .planning-date-input { padding:8px 10px; border:1px solid #d0d6e8; border-radius:8px; font-size:14px; width:100%; }
    .planning-import-section { margin-bottom:20px; padding:16px; background:#fff; border-radius:12px; border:1px solid #e2e8f0; }
    .imported-topics-wrap { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; min-height:40px; }
    .import-panel { display:flex; flex-direction:column; gap:12px; align-items:center; }
    .import-panel .import-box { background:linear-gradient(90deg,#7ec8ff,#1c77ff); color:#fff; padding:12px 16px; border-radius:10px; min-width:200px; text-align:center; }
    .import-panel button { background:#0b63e6; color:#fff; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; }

    /* topics source area */
    #imported-topics { margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
    .topic { background:#fff; border-radius:8px; padding:8px 12px; box-shadow:0 2px 8px rgba(0,0,0,0.06); cursor:grab; border:1px solid #e6eefc; }

    /* progress/import modal (scoped; do not override global .modal-overlay) */
    #import-modal.modal-overlay,
    #progress-modal.modal-overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:150000; }
    #import-modal .modal { background:#fff; padding:18px; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,0.15); min-width:320px; }
    .import-options { display:flex; gap:8px; }
    .import-options button { flex:1; padding:10px; border-radius:8px; border:1px solid #d0d6e8; background:#fff; cursor:pointer; }

    /* progress visual */
    .progress-modal { display:flex; flex-direction:column; gap:14px; align-items:center; padding:26px; border-radius:14px; background:linear-gradient(135deg,#7ec8ff,#1c77ff); color:#fff; }
    .smiley { font-size:48px; }
    .progress-bar { width:260px; height:10px; background:rgba(255,255,255,0.3); border-radius:999px; overflow:hidden; }
    .progress-bar > i { display:block; height:100%; background:rgba(255,255,255,0.95); width:0%; }

    @media (max-width:900px){ .planning-center{flex-direction:column; align-items:stretch} .planning-card{min-width:unset;width:100%} }

